时间戳

首页 > 解决方案 > React Native Navigation：在嵌套在堆栈导航器中的选项卡导航器中组织组件引用的最佳方式？

react-native - React Native Navigation：在嵌套在堆栈导航器中的选项卡导航器中组织组件引用的最佳方式？

问题描述

在我的 React Native 应用程序中，我有一个称为堆栈导航器的堆栈导航器StackNavigator，其中包含两个选项卡导航器TabNavigator1和TabNavigator2. TabNavigator1包含屏幕TabNavigator1_Screen1和TabNavigator1_Screen2，并且TabNavigator1包含TabNavigator2_Screen1， 和TabNavigator2_Screen2。从所有这四个屏幕中，用户需要能够导航到各种其他屏幕、Screen1、Screen2和Screen3。

我在用着react-navigation@4.x

我想知道的：

引用 、 和 的最佳位置Screen1在Screen2哪里Screen3？我知道我可以添加它们的唯一地方是在定义StackNavigator. 所以我会做

createStackNavigator(
  {
    TabNavigator1,
    TabNavigator2,
    TabNavigator1_Screen1,
    TabNavigator1_Screen2,
    TabNavigator2_Screen1,
    TabNavigator2_Screen2,
    Screen1,
    Screen2,
    Screen3,
    Screen4,
  }
)

然后进入TabNavigator1并将TabNavigator1他们的导航道具传递给屏幕

screenProps={{
  navigation: this.props.navigation
}}

这样就TabNavigator1_Screen1可以导航到Screen1with this.props.screenProps.navigation.navigate('Screen1')。

有没有一种方法可以组织所有这些屏幕引用，以便我定义屏幕可以导航到的特定屏幕，TabNavigator1以及屏幕可以导航到的其他屏幕TabNavigator1？

标签： react-nativereact-navigationreact-navigation-stackstack-navigatorreact-native-tabnavigator

解决方案

推荐阅读