在 react-native 中嵌套多个 Stacknavigation答案

【问题标题】：Nesting multiple Stacknavigations in react-native在 react-native 中嵌套多个 Stacknavigation
【发布时间】：2021-06-14 19:33:00
【问题描述】：

我正在使用打字稿和功能组件编写一个 expo（react-native）应用程序。我有一个非常嵌套的堆栈导航。

App: {
  NavigationConatainer: {
    DrawerNavigation: {
      StackNavigator1: {
        HomeScreen,
        DetailedScreen,
        ButtonTabNavigator: {
          InfoScreen,
          StackNavigation2: {
            MainScreen,
            SubScreen1,
            SubScreen2,
          },
          MetaScreen
        }
      }
    },
    SomeCustomDrawerItems,
  }
}

我希望这能稍微展示一下架构。

现在我遇到了问题。

SubScreen1 位于 ButtonTabNavigation 选项卡上方
如何在 SubScreen1 和 2 上隐藏 StackNavigation1 的标题并显示新的 StackNavigation2 标题

似乎是堆栈混合。按 SubScreen1 上的后退按钮可从 StackNavigation1 导航到DetailedScreen。

谁知道如何实现这种嵌套堆栈？

【问题讨论】：

标签： javascript typescript react-native expo

【解决方案1】：

我希望您试用此导航结构，如果您遇到任何问题，请告诉我。

创建导航器对象（抽屉、底部选项卡和堆栈）

const Drawer = createDrawerNavigator()
const BottomTab = createBottomTabNavigator()

const Stack1 = createStackNavigator()
const Stack2 = createStackNavigator()

为每个导航器创建功能组件：

const stack_1 = () => {
 return (
    <Stack1.Navigator
      screenOptions={{ gestureEnabled: false, headerShown: false }}
    >
      <Stack1.Screen
        name={"home screen"}
        component={} //provide the home screen component here
      />
      <Stack1.Screen
        name={"detailed screen"}
        component={} //provide the detailed screen component here
      />
      <Stack1.Screen
        name={"bottom tab"}
        component={<bottom_tab />} //provide the bottom_tab component here
      />
    </Stack1.Navigator>
  )
}

const stack_2 = () => {
 return (
    <Stack2.Navigator
      screenOptions={{ gestureEnabled: false, headerShown: false }}
    >
      <Stack2.Screen
        name={"MainScreen"}
        component={} //provide the main screen component here
      />
      <Stack2.Screen
        name={"SubScreen1"}
        component={} //provide the sub screen 1 component here
      />
      <Stack2.Screen
        name={"SubScreen2"}
        component={} //provide the sub screen 2 component here
      />
    </Stack2.Navigator>
  )
}

const bottom_tab = () => {
 return (
    <BottomTab.Navigator
      screenOptions={{ gestureEnabled: false, headerShown: false }}
    >
      <BottomTab.Screen
        name={"InfoScreen"}
        component={} //provide the Info screen component here
      />
      <BottomTab.Screen
        name={"nested stack 2"}
        component={<stack_2/>} //providing the stack_2 component here
      />     
    </BottomTab.Navigator>
  )
}

使用这种结构，我们避免了您的第一个问题。 subscreen1 & subscreen1 的底部标签导航器可见。

关于您的第二个问题，使用 headerShown 选项作为 false，我们已阻止任何堆栈的标题在任何屏幕中可见。

我建议您将自己的标题创建为组件并在任何屏幕中调用它，因为这种方法在自定义方面比现有标题提供了更大的灵活性。
基本上，你可以玩弄它，在这种情况下，避免混淆。

创建标题组件：

const Header = () => 
    <View style={styles.nav_container}>
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Feather
            name={'arrow-left'}
            size={moderateScale(30)}
            color={colors.white}
            style={{ marginRight: moderateScale(20) }}
         />
      </TouchableOpacity>
      <Text style={styles.nav_text}>Your Screen name</Text>
    </View>

export default Header

const styles = nav_container: {
    flexDirection: 'row',
    ...styling.navHeaderSize,
    backgroundColor: colors.black,
    alignItems: 'center',
    paddingTop: DeviceInfo.hasNotch() === true ? '20@ms' : '20@ms',
    paddingHorizontal: '20@ms',
  },

您可以在任何屏幕中调用它，并按照您的要求工作。

【讨论】：