react-native - 如何使用来自 React 本机平面列表的不同数据进入同一屏幕

Question

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

Answer 1

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

例如

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

Answer 2

您必须获取 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 3

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