React Native底部Tab导航如何向其他导航页面传递参数

你使用的navigation.navigate传参写法本身是正确的，React Navigation的导航传参API对Stack、Tab等所有导航器都是通用的，报错是两个原因导致：

1. 旧版本的navigation.state.params取值方式已经不推荐，且如果页面从未接收过参数，state.params本身就是undefined，直接取值会报错
2. 没有给参数做兜底处理，用户如果未经过登录跳转，直接点击Tab栏进入Profile页面时，没有传递任何参数

1. 调整参数获取逻辑（核心修复） #

React Navigation v5及以上版本，所有页面组件都会被注入route属性，专门用于参数获取，比直接操作navigation.state更稳定，同时需要加空值判断或默认值：

类组件写法（匹配你当前的this.props用法） #

// profile.js 取值逻辑
render() {
  // 可选链判断参数是否存在，不存在默认返回“未登录”
  const userEmail = this.props.route?.params?.Email ?? '未登录';
  return (
    <View>
      <Text>用户邮箱：{userEmail}</Text>
    </View>
  )
}

函数组件写法（供参考） #

function Profile({ route }) {
  const userEmail = route?.params?.Email ?? '未登录';
  return <Text>用户邮箱：{userEmail}</Text>
}

2. 配置页面初始参数（可选，彻底避免空值报错） #

如果需要兼容用户直接点击Tab栏进入Profile的场景，可以在Tab.Screen配置中添加初始参数，保证route.params永远不为空：
修改你的app.js配置：

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={getTransaction} />
        <Tab.Screen name="addTransaction" component={addTransaction} />
        <Tab.Screen name="Register" component={register} />
        <Tab.Screen name="Login" component={login} />
        <Tab.Screen 
          name="Profile" 
          component={profile} 
          // 添加初始参数
          initialParams={{ Email: '未登录' }} 
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

配置后无需加空值判断，直接用this.props.route.params.Email取值即可。

3. 登录态存储优化建议 #

登录后的用户邮箱属于全局常用信息，仅通过路由传参容易丢失（比如用户重启APP、手动切换Tab时参数会重置），更推荐用全局存储方案保存：

• 轻量场景可以用AsyncStorage持久化存储用户信息，进入Profile页面时主动读取
• 复杂场景可以用Context、Zustand、Redux等状态管理工具全局维护登录态

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