在本机网格视图中添加项目单击事件

Question

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

当用户点击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;

Answer 1

而不是在你的<View>中使用renderGridItem，你可以使用其中一个可触摸组件（反应原生doc）。

例如，使用<TouchableOpacity >：

renderGridItem = (props) => (
  <TouchableOpacity style={styles.item} onPress={() => this.showAlert(props.name)}>
    <View style={styles.flex} />
    <Text style={styles.name} >
      {props.name}
    </Text>
  </TouchableOpacity>
);

showAlert = (name) => {
   Alert.alert(
    'Alert Title',
    `The user name is: ${name}`,
    [
      {text: 'OK', onPress: () => console.log('OK Pressed')},
    ],
    { cancelable: false }
  )
}

Answer 2

为什么不在touchableWithoutFeedback中包装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导入Alert。