React Native：将道具传递给嵌套导航答案

【问题标题】：React Native: Passing props to nested navigationReact Native：将道具传递给嵌套导航
【发布时间】：2017-10-20 03:03:23
【问题描述】：

我正在使用光滑的 React Navigation 并在此处关注 nested navigation recipe，但我不知道如何将“this”传递给我的导航。对不起，我的无知。

这是我的总体结构大纲：

class MyApp extends Component {
  render() {
    return (
      <StackNavigation
        screenProps={this.state}
      />
    )
  }
}

const MainScreenNavigator = TabNavigator(
  {
    Awesome: { screen: Awesome } // How do I pass this.state?
  }
)

const routesConfig = {
  Home: { screen: MainScreenNavigator },
  Profile: { screen: Profile }
}

const StackNavigation = StackNavigator(routesConfig, {initialRouteName: 'Home'})

那么如何将 this.state 传递给我的 MainScreenNavigator？

【问题讨论】：

标签： reactjs react-native ecmascript-6 react-navigation

【解决方案1】：

根据this，您可以在StackNavigatorConfig 中将一个额外的选项传递给StackNavigator。像这样的：

const StackNavigation = StackNavigator(routesConfig, StackNavigatorConfig)

...StackNavigatorConfig 是这样的对象：

{ initialRouteName: 'Home', initialRouteParams: {...this.state} }

这会将您的所有状态传递到导航器的初始路线。

对于任何其他路线，您可以这样做：

this.props.navigation.navigate('SomeScreen', {<the-greatest-object-for-pass-down>})

这会将 the-greatest-object-for-pass-down 传递给 SomeScreen。

最后，您可以使用this.props.navigation.params 访问both（初始屏幕和任何其他屏幕）的参数。

【讨论】：

我想我的意思是const StackNavigation是在App组件之外声明的，所以它没有this的上下文并且this不可用
你说得对，直到现在我才意识到。但是……你具体想做什么？为什么screenProps 不能解决你的问题？
所以，这个 works 用于初始渲染，但我注意到如果修改了这些道具（例如通过修改根组件的状态），子屏幕不会重新渲染.是否有强制导航器更新其道具？

【解决方案2】：

不确定您是否可以按原样传递状态。但是，您传递的参数可以通过下一个屏幕访问，如下所示..您可以试试这个

  this.props.navigation.state.params.<<property passes>>

【讨论】：