如何为React Native中的网格视图中的每个项目赋予Touchable Opacity？

Question

我在React Native中使用react-native-super-grid进行网格视图。我想为每个项目赋予可触摸的不透明度。我怎么做。我想在每次点击网格项时导航到相应的页面。以下是我的代码。

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>
  )}
/>

Answer 1

假设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)}>
  // ...
}