React Native 如何实现菜单列表项点击跳转至对应新组件页面

核心结论 #

用户点击触发的页面跳转，直接在TouchableOpacity的onPress回调里写导航逻辑就行——这是RN开发里最标准、最可控的实现方式，没有什么更“高级”的替代方案。不管用哪种导航方案，本质上都是在用户的点击事件里触发路由切换，脱离了用户交互回调谈跳转都是不成立的。

先把现有代码的基础问题修了 #

在接跳转逻辑之前，先把现在代码里的几个小坑填上，不然后续跑起来会报一堆无关报错：

• 导入写法冗余还报错：现在同时从react里导了不存在的小写component，又单独导Component，完全没必要，正确写法只留一行：import React, { Component } from 'react'
• 列表渲染的key冲突：菜单数组里有好几个菜单项的id都是3，RN渲染列表时会因为key重复弹出警告，给每个菜单项补个唯一的id值就行
• 样式缺失：列表项的Text绑定了styles.text，但StyleSheet里压根没定义这个样式，记得补上对应的文字大小、颜色规则
• 非RN属性误用：TextInput上写的type="text"是Web DOM元素的属性，RN的TextInput组件不支持，写了也不会生效，直接删掉就行

跳转的具体实现步骤 #

1. 先搭好导航的基础结构
   把采购记录、设置、政策说明、客户支持这些要跳转的独立功能组件，在应用的导航配置里注册成独立路由，给每个路由起个好记的唯一名字就行。
2. 给每个菜单项绑定对应的路由标识
   别在onPress里写一堆if else判断“如果点了Purchases就跳A，点Settings就跳B”，太冗余，直接给每个菜单项加个路由名字段，修改后的state参考：

   state = {
       names: [
           { id: 0, name: 'Purchases', routeName: 'PurchasesPage' },
           { id: 1, name: 'Settings', routeName: 'SettingsPage' },
           { id: 2, name: 'Policies', routeName: 'PoliciesPage' },
           { id: 3, name: 'Feedback', routeName: 'FeedbackPage' },
           { id: 4, name: 'Customer support', routeName: 'SupportPage' },
           { id: 5, name: 'About the app', routeName: 'AboutPage' },
       ]
   }
   

3. 把onPress里的调试日志换成导航调用
   只要页面被导航容器正确包裹，组件会自动拿到内置的navigationprops，直接调用导航方法就能完成跳转，替换原来的console.log('hello')就行：

   <TouchableOpacity
       key={item.id}
       style={styles.listCont}
       onPress={() => this.props.navigation.navigate(item.routeName)}
   >
       <Text style={styles.text}>
           {item.name}
       </Text>
   </TouchableOpacity>
   

几个容易踩的坑 #

• 跳转如果要带参数（比如跳采购记录页的时候要带上当前登录的用户ID），直接在navigate的第二个参数传对象就行，比如this.props.navigation.navigate(item.routeName, { userId: 'u_1001' })，目标页面可以通过自己的路由props直接拿到这个参数
• 如果在Profile页拿不到this.props.navigation，说明这个页面没被导航容器正确注册，把它加到路由配置列表里就好，不用一层层手动把props从父组件传进来
• 别把跳转逻辑写在组件的render函数、生命周期方法里，所有用户主动触发的跳转，必须放在点击回调里执行——不然很容易出现页面刚加载完就自动跳走的异常问题

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