React Native嵌套StackNavigator参数传递问题

嘿，我明白你的困扰——当把TabNavigator里的Home路由从单个屏幕换成StackNavigator后，原来的参数传递方式就失效了，对吧？别担心，这是嵌套导航里很常见的场景，我给你两种简单的解决方案：

方法一：直接跳转到Stack内的目标屏幕 #

你可以在跳转时明确指定要打开StackNavigator里的Launch屏幕，并把参数放在params里，这样参数会直接传递到LaunchScreen中：

this.props.navigation.navigate('Home', {
  screen: 'Launch',
  params: {
    station:e,
    code:f,
    filter:'',
    filterName:'',
    offset:0
  }
})

然后在LaunchScreen里，你就可以像之前一样通过this.props.navigation.state.params来获取这些参数了：

// 在LaunchScreen的组件中
componentDidMount() {
  const { station, code, filter, filterName, offset } = this.props.navigation.state.params;
  // 这里就可以使用这些参数做逻辑处理了
}

方法二：从父导航中获取参数 #

如果你想保持原来的跳转写法（只跳转到Home），那可以在LaunchScreen里从它的父导航（也就是FeedStack）中提取参数：

// 在LaunchScreen的组件中
componentDidMount() {
  // 获取父导航的参数
  const parentParams = this.props.navigation.dangerouslyGetParent().state.params;
  const { station, code, filter, filterName, offset } = parentParams;
  // 后续逻辑处理
}

为什么原来的方式失效了？ #

之前Home直接对应LaunchScreen，所以你传递的参数会直接绑定到LaunchScreen的路由状态里。但现在Home对应的是FeedStack这个StackNavigator，你原来的跳转方式会把参数传递给FeedStack的路由状态，而不是自动传递给它的初始屏幕LaunchScreen，所以需要我们手动指定参数的传递路径。

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