Question

TabNavigator中有2个StackNavigator对象，屏幕很少。如何从App.js传递道具 - ＆gt; TabNavigator - ＆gt;每个StackNavigator - ＆gt;屏幕？

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

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}}/>},
})

Answer 1

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

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

在您的示例中，您将屏幕作为将props传递给组件的函数。但它如何知道从哪里获取这些道具？

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

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

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

Answer 2

我最终得到的解决方案是删除所有传递道具的技术，并使用screenProps。原来，当您具有诸如AppComponent-> TabNavigator-> StackNavigator-> HomeComponent之类的层次结构时，其中“->”表示“ includes”或“ renders”，因此无需将screenProps从TabNavigator显式传递给StackNavigator，因为screenProps默认情况下在2个导航器中传递。

如何将反对原生的TabNavigator中的道具传递给StackNavigator？

2 个答案: