Question

我是React Native的新手，我有FlatList包含一些我想使用代码的项目，例如当我单击平面列表上的任何项目时，会打开一个屏幕并显示与该项目相关的数据。当我单击另一个项目时打开同一屏幕，但包含与该项目相关的数据。表示可重用性。

Answer 1

您必须获取renderItem中的值。为每个项目平面列表渲染调用renderItem，同时您还将获得每个项目的索引。

   <FlatList
          style={styles.FlatListStyle}
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          data={this.state.data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item, index }) => {
            return (
              <Button title = 'hello'
onPress = {() =>alert(item)}
              />
            );
          }}
        />

Answer 2

  <FlatList
    data={data}
    renderItem={({item}) => (
      <Button onPress={() => navigate('Details', {data: item})} />
    )}
  />

Answer 3

出于导航目的，您必须使用react-navigation软件包。然后onPress可以简单地调用navigation.push方法来导航到不同或相同的堆栈（屏幕）。

例如

navigation.push("SameScreen",{newData:"value"})

如何使用React Native Flat List中的不同数据进入同一屏幕

3 个答案: