Reactjs 在react native Grid视图中添加项目单击事件

请在下面找到我的代码，并帮助我为网格视图中的项目添加项目单击侦听器。请找到我跟踪的链接

当用户单击gridlist中的每个项目时，我需要在警报中显示名称。代码中不包括样式

提前谢谢

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableWithoutFeedback
} from 'react-native';
import GridLayout from 'react-native-layout-grid';

class HomeScreen extends Component {

renderGridItem = (props) => (
<View style={styles.item}  >
  <View style={styles.flex} />
  <Text style={styles.name} >
    {props.name}
  </Text>
</View>
);
render() {
const items = [];
for (let x = 1; x <= 30; x++) {
  items.push({
    name: `Grid ${x}`
  });
}
return (
  <View style={styles.container}>
    <Text style={styles.welcome}>
      Grid Layout
    </Text>
    <View style={styles.flex}>
      <GridLayout
        items={items}
        itemsPerRow={2}
        renderItem={this.renderGridItem}>
      </GridLayout>
    </View>
  </View>
);
}
}


export default HomeScreen;

您可以使用一个touchables组件react native doc，而不是在renderGridItem中使用

例如：

您可以使用一个touchables组件react native doc，而不是在renderGridItem中使用

例如：

---

为什么不将renderGridItem封装在一个无反馈的触摸屏中

renderGridItem = (props) => (
  <TouchableWithoutFeedback onPress={()=> Alert.alert(props.name)}>
    <View style={styles.item}  >
     <View style={styles.flex} />
       <Text style={styles.name} >
       {props.name}
       </Text>
     </View>
    <TouchableWithoutFeedback />
  );

---

此外，您还需要从react native导入警报。

为什么不将renderGridItem包装在Touchable中而不进行反馈

renderGridItem = (props) => (
  <TouchableWithoutFeedback onPress={()=> Alert.alert(props.name)}>
    <View style={styles.item}  >
     <View style={styles.flex} />
       <Text style={styles.name} >
       {props.name}
       </Text>
     </View>
    <TouchableWithoutFeedback />
  );

您还需要从react native导入警报