如何在Flatlist中添加click listener?

我的代码:

renderItem({item, index}){
    return <View style = {{
    flex:1,
    margin: 5, 
    minWidth: 170, 
    maxWidth: 223,
    height: 304,
    maxHeight: 304,
    backgroundColor: '#ccc',
    }}/>
}
render(){
return(<FlatList
contentContainerStyle={styles.list}
data={[{key: 'a'}, {key: 'b'},{key:'c'}]}
renderItem={this.renderItem}
/>);
}
}

更新1:我使用了按钮,但在Flatlist分钟内不起作用.然而,只使用按钮而不是Flatlist,它是有效的.为什么它不能在Flatlist分钟内工作?

_listener = () => {
    alert("clicked");
}

renderItem({item, index}){
    return<View>
      <Button
          title = "Button"
          color = "#ccc"
          onPress={this._listener}
      />
    </View>
}

推荐答案

您需要将行元素(在renderItem方法中)包装在<TouchableWithoutFeedback>标记中.TouchableWithoutFeedback将onPress作为props ,您可以在其中提供onPress活动.

有关TouchableWithoutFeedback,请参阅此link

React-native相关问答推荐

对iOS通知上未显示的本机映像做出react

1.5.1 nxworkspace+react-native 版本的Axios url未定义问题

如何渲染一个 svg 以在不同的窗口大小下动态地看起来相同?

FlatList 总是增长到 100% 高度

React-Native-Web 错误:rnw_blogpost.bundle.js:1414 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

如何防止 VS Code 从react-native-web自动导入?

如何修复 React Native 中任务:app:processDebugManifest的执行失败?

使用 resizeMode 封面截断的图像

在 React Native Paper 中更改 TextInput 的文本 colored颜色

使用 React-Native 将 content:// URI 转换为 Android 的实际路径

React-native 解码 base64 编码字符串

是否可以在 React Native 中隐藏BugReporting extraData?

使用 resizeMode = contain时的图像对齐

在配置 react-native-maps 中获取 "supportLibVersion" 、 "playServicesVersion" 和 "androidMapsUtilsVersion" 值

react-native run-android 在设备上构建旧版本的代码

react-native run-android 构建错误':app:generateDebugBuildConfig'

等待模块失效的超时

Super expression must either be null or a function, not undefined

Gradlew bundleRelease 不会在 react-native 中生成发布 apk

React Native font outline / textShadow