如何在React Native FlatList中用TouchableOpacity跳转至不同页面

核心思路 #

给FlatList的每个数据源项绑定对应的目标路由名称，点击时根据该路由名调用navigation.navigate()完成跳转，替代原先固定指向BossScreen的逻辑。

步骤1：更新数据源，添加路由字段 #

在HomeScreen的数据源数组中，为每个条目新增screen字段，值与MainNavigator中配置的页面路由名完全匹配（比如MagicScreen、FightingStyleScreen）：

// HomeScreen 中的数据源示例
const menuItems = [
  { id: '1', title: '魔法', screen: 'MagicScreen' },
  { id: '2', title: '战斗风格', screen: 'FightingStyleScreen' },
  { id: '3', title: 'Boss挑战', screen: 'BossScreen' },
  // 其他需要跳转的条目...
];

步骤2：修改FlatList的点击事件逻辑 #

在renderItem渲染函数中，让TouchableOpacity的onPress根据当前item的screen字段动态跳转，替换固定的BossScreen：

// HomeScreen 中FlatList的核心代码
<FlatList
  data={menuItems}
  numColumns={2} // 保留你的多列布局配置
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => (
    <TouchableOpacity
      style={/* 你的列表项样式 */}
      onPress={() => {
        // 动态跳转至当前item对应的页面
        navigation.navigate(item.screen);
      }}
    >
      <Text>{item.title}</Text>
      {/* 其他列表项UI元素 */}
    </TouchableOpacity>
  )}
/>

关键注意点 #

• 确保menuItems里的screen值和MainNavigator中注册的路由名称大小写完全一致（React Navigation路由名区分大小写）；
• 如果你的导航结构是嵌套式（比如StackNavigator嵌套在DrawerNavigator内），需要调整跳转逻辑为navigation.navigate('父路由名', { screen: item.screen })，具体格式取决于你的MainNavigator配置结构。

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