如何在原生反应中将道具从 TabNavigator 传递到 StackNavigator？答案

【问题标题】：How to pass props from TabNavigator to StackNavigator in react native?如何在原生反应中将道具从 TabNavigator 传递到 StackNavigator？
【发布时间】：2018-06-18 23:28:46
【问题描述】：

TabNavigator 中有 2 个 StackNavigator 对象，其中的屏幕很少。如何从 App.js -> TabNavigator -> 每个 StackNavigator -> screen 传递道具？

下面的代码会产生错误，说只能渲染一个路由器。

const SettingsStack = createStackNavigator({
  Settings: {screen: props => <SettingsScreen {...props} screenProps={{is_authenticated: props.is_authenticated}}/> },
  Profile: {screen: ProfileScreen},
});

const MainTabNavigator = createBottomTabNavigator({
    SettingsStack: {screen: props => <SettingsStack {...props} screenProps={{is_authenticated: props.is_authenticated}}/>},
})

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

您必须以某种方式提供一种将属性传递到导航器对象的方法。也许你的函数可以这样工作：

function createNav (props) {
  // Do something
  return createStackNavigator({
    Settings: {screen: <SettingsScreen {...props})
  })
}

在您的示例中，您将屏幕作为将道具传递给组件的函数。但是它怎么知道从哪里得到这些道具呢？

基本道具的另一个非常简单的选择是传递property with navigation。在这种情况下，您基本上在导航期间调用navigate('screen', {property: 'value'})然后使用

const val = navigation.getParam('property', 'defaultValue') // 'value'

在您导航到的屏幕上显示它。

【讨论】：

【解决方案2】：

我最终得到的解决方案是删除所有道具传递技术并使用 screenProps。事实证明，当你有 AppComponent -> TabNavigator -> StackNavigator -> HomeComponent 等层次结构时，其中“->”表示“包含”或“渲染”，不需要显式将 TabNavigator 中的 screenProps 传递给 StackNavigator，因为 screenProps默认情况下在 2 个导航器中传递。

【讨论】：