如何从Splash页的StackNavigator传参到TabNavigator内的子StackNavigator组件

我明白你遇到的问题了——启动页通过NavigationActions.reset传递的参数，没办法直接在TabNavigator嵌套的子StackNavigator组件里拿到对吧？这是因为TabNavigator不会自动把自身收到的参数向下传递给它的子导航器或者子组件，得我们手动做一层传递处理。下面给你几个可行的方案：

方案一：通过导航层级直接获取参数 #

你可以在Information组件里，通过导航的父级上下文来获取启动页传递的参数。直接在组件的生命周期方法里加入这段代码：

componentDidMount() {
  // 获取TabScreen层级下的参数
  const userLocation = this.props.navigation.dangerouslyGetParent().getParam('userLocation');
  // 这里就可以正常使用userLocation了
  console.log(userLocation);
}

这种方法不需要修改导航器的配置，适合快速解决问题，但要注意导航层级的结构，如果后续导航结构变动，可能需要调整这段代码。

方案二：手动传递参数给子StackNavigator #

修改你的TabNavigator配置，把TabScreen收到的props完整传递给子StackNavigator：

const TabScreen = TabNavigator({
  Information: {
    // 用函数组件包装，将TabScreen的所有props传递给InformationStack
    screen: (props) => <InformationStack {...props} />
  }
});

然后在InformationStack里，把参数直接作为props传递给Information组件：

const InformationStack = StackNavigator({
  Information: {
    screen: (props) => {
      // 从父级导航获取参数
      const userLocation = props.navigation.dangerouslyGetParent().getParam('userLocation');
      // 将参数作为props传递给Information组件
      return <Information {...props} userLocation={userLocation} />;
    }
  }
});

这样你就能在Information组件里直接通过this.props.userLocation拿到参数了。

方案三：使用screenProps传递参数 #

这是更简洁的方式，把参数通过screenProps传递，而不是params。修改启动页的重置代码：

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({
      routeName: 'TabScreen',
      screenProps: { userLocation } // 改用screenProps传递参数
    })
  ]
});
this.props.navigation.dispatch(resetAction);

之后在Information组件里，直接通过this.props.screenProps.userLocation就能获取到参数了，这种方法不需要处理导航层级，代码更清晰，耦合度更低。

你可以根据自己的项目需求选择其中一种方案，个人比较推荐方案三，后续维护起来会更省心。

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