react-native - 如何在 native react 中将 Prop 从 TabNavigator 传递到 StackNavigator？

Question

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

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

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

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

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

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

将其显示在您正在导航到的屏幕中。