React Native中如何从StackNavigator向TabNavigator传递参数？

看起来你遇到的核心问题有两个：参数传递的语法错误，以及TabNavigator子页面获取参数的正确方式，我来一步步帮你解决：

1. 修复参数传递的语法错误 #

你在onSignIn().then()里的导航调用写错了，navigation.navigate("SignedIn"),data这种写法相当于只执行了navigation.navigate("SignedIn")，data并没有作为参数传递进去。正确的做法是把data作为navigate方法的第二个参数：

修改Auth.js里的这段代码：

// 错误写法
onSignIn().then(() => navigation.navigate("SignedIn"),data);

// 正确写法
onSignIn().then(() => {
  navigation.navigate("SignedIn", data);
});

这样参数就会被正确传递到SignedIn这个TabNavigator中了。

2. 在TabNavigator的子页面中获取参数 #

因为SignedIn是一个TabNavigator，它的子页面（Home/Profile）不能直接通过this.props.navigation.state.params拿到参数，需要通过以下两种方式获取：

方式一：从父导航中获取参数 #

在Home或Profile组件中，通过访问父导航的参数来获取：

// 比如在Profile组件的render方法里
render() {
  // 安全获取参数，带默认值避免undefined
  const userName = this.props.navigation.dangerouslyGetParent().state.params?.name || 'Guest';
  const userId = this.props.navigation.dangerouslyGetParent().state.params?.id || '';

  return (
    <View>
      <Text>Welcome {userName}!</Text>
      <Text>Your ID: {userId}</Text>
    </View>
  );
}

dangerouslyGetParent()用来获取当前页面所在的TabNavigator的导航实例，然后就能拿到传递过来的参数了。

方式二：在TabNavigator中主动传递参数给子页面 #

如果你觉得上面的方式不够直观，可以在router.js里修改TabNavigator的配置，把参数直接传递给每个子页面：

export const SignedIn = TabNavigator( 
  { 
    Home: { 
      // 用函数组件包装Home，把父导航的参数传递进去
      screen: (props) => <Home {...props} {...props.navigation.state.params} />,
      navigationOptions: { 
        tabBarLabel: "Home", 
        tabBarIcon: ({ tintColor }) => ( 
          <FontAwesome name="home" size={30} color={tintColor} /> 
        ) 
      } 
    }, 
    Profile: { 
      screen: (props) => <Profile {...props} {...props.navigation.state.params} />,
      navigationOptions: { 
        tabBarLabel: "Profile", 
        tabBarIcon: ({ tintColor }) => ( 
          <FontAwesome name="user" size={30} color={tintColor} /> 
        ) 
      } 
    } 
  }, 
  { 
    tabBarOptions: { 
      style: { 
        paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0 
      } 
    } 
  } 
);

这样在Home或Profile组件里，就可以直接通过this.props.name和this.props.id获取参数了：

render() {
  return (
    <View>
      <Text>Welcome {this.props.name}!</Text>
    </View>
  );
}

验证一下 #

修改完之后，你可以在子页面的componentDidMount里打印参数确认：

componentDidMount() {
  console.log('Received params:', this.props.navigation.dangerouslyGetParent().state.params);
  // 或者如果用方式二的话：
  // console.log('Received props:', this.props.name, this.props.id);
}

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