React Native中如何通过FlatList的onPress跳转至其他页面

1. 确认路由配置已完成 #

确保你已经通过React Navigation（比如Stack Navigator）注册了目标页面（如PageOne、PageTwo等），并且当前的Testing页面已被包含在导航容器中。

2. 修改数据源，补充目标页面路由名 #

给data数组的每个条目添加对应页面的路由名称，明确跳转目标：

const data = [
  {id: 'a', value: 'From here Navigate to page one ', screenName: 'PageOne'},
  {id: 'b', value: 'From here Navigate to page two', screenName: 'PageTwo'},
  {id: 'c', value: 'From here Navigate to page three', screenName: 'PageThree'},
  {id: 'd', value: 'From here Navigate to page four', screenName: 'PageFour'},
  {id: 'e', value: 'E', screenName: 'PageE'}, // 可根据实际需求修改
  {id: 'f', value: 'F', screenName: 'PageF'},
];

3. 给列表项添加点击交互与导航逻辑 #

用TouchableOpacity包裹列表项，添加onPress事件触发导航：

const Testing = ({ navigation }) => {
  return (
    <FlatList
      data={data}
      renderItem={({item}) => (
        <TouchableOpacity 
          style={styles.itemContainer}
          onPress={() => navigation.navigate(item.screenName)}
        >
          <Text style={styles.item}>{item.value}</Text>
        </TouchableOpacity>
      )}
      keyExtractor={item => item.id}
      numColumns={numColumns} />
  );
}

额外说明 #

• TouchableOpacity会提供点击透明度变化的反馈，是React Native常用的可交互容器组件
• 传入navigation.navigate的screenName必须和路由配置中注册的页面名称完全一致
• 如果需要给目标页面传参，可以写成navigation.navigate(item.screenName, { itemId: item.id })，目标页面通过route.params.itemId接收参数

内容的提问来源于stack exchange，提问作者Rahul Aadam