Как сделать Touchable Opacity для каждого элемента в виде сетки в React Native? - PullRequest
Новая
       9

Как сделать Touchable Opacity для каждого элемента в виде сетки в React Native?

0 голосов
/ 26 октября 2018

Я использую react-native-super-grid для вида сетки в React Native. Я хочу дать непрозрачную непрозрачность для каждого элемента. Как я это сделал. Я хочу перейти на соответствующую страницу при каждом щелчке элемента сетки. Ниже приведен мой код. 

render(){
    return(

      <View style={{flex: 1}}>
      <SuperGridSectionList
  itemDimension={130}
  sections={[
    {
      title: 'Home Page',
      data: [
        { name: 'New Work Request', code: '#8e44ad' }, { name: 'Worker', code: '#2c3e50' },
        { name: 'Report', code: '#f1c40f' }, { name: 'Complaints', code: '#e67e22' },
        { name: 'User', code: '#e74c3c' }
      ]
    },
  ]}
  style={styles.gridView}
  renderItem={({ item }) => (
  <TouchableOpacity onPress={console.log("clicked")}>
    <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
      <Text style={styles.itemName}>{item.name}</Text>
    </View>
  </TouchableOpacity>
  )}
  renderSectionHeader={({ section }) => (
    <Text style={{ color: 'green' }}>{section.title}</Text>
  )}
/>

1 Ответ

0 голосов
/ 29 октября 2018

Предполагая, что item имеет type или аналогичное свойство, чтобы различать, куда перемещаться, что-то вроде этого должно привести вас хотя бы к полпути: 

const getNavigation = (item) => {
  switch (item.type) {
    case 'firstPage':
      return Actions.firstPage(item.id);
    case 'secondPage':
      return Actions.secondPage(item.id);
  }
}

render() {
  // ...
  <TouchableOpacity onPress={() => this.getNavigation(item)}>
  // ...
}
...