嵌套导航——标签内的堆栈或堆栈内的标签——在 React Native 中答案

【问题标题】：Nested navigation -- Stack within Tab or Tab within Stack -- in React Native嵌套导航——标签内的堆栈或堆栈内的标签——在 React Native 中
【发布时间】：2021-01-24 08:08:39
【问题描述】：

标签导航中的堆叠导航无法正常工作。

  <Tab.Navigator>
    <Tab.Screen name={routes.Area1} component={Area1Navigator}/>
    <Tab.Screen name={routes.Area2} component={Area2Navigator}/>
    <Tab.Screen name={routes.Area3} component={Area3Navigator}/>
  </Tab.Navigator>

const Area2Navigator = () => (
  <Stack.Navigator
    mode='modal'
    screenOptions={{
      headerStyle: { backgroundColor: defaultStyles.colors.bgHighlightColor },
      headerTintColor: defaultStyles.colors.black,
      headerBackTitleStyle: { color: defaultStyles.colors.headerBackTitleColor }
    }}>
    <Stack.Screen name={routes.Area2} component={Area2Screen} options={{
      headerTitleAlign: 'center',
      headerShown: true,
      title: 'My Books'
    }} />
    <Stack.Screen name={routes.AREA2_DETAILS} component={Area2DetailsScreen} options={{
      headerShown: false
    }} />
  </Stack.Navigator>
)

我遇到的问题与通过 iPhone 上的 Expo 模拟器嵌套在选项卡导航中的堆栈导航有关。例如，Area2 具有嵌套的堆栈导航。如果我导航到第三个选项卡然后返回到第二个选项卡，触摸功能将在 Area2 中停止工作。 Android模拟器不存在这个问题。有没有人遇到过这种异常情况？我担心这个问题也会出现在应用程序的真实 iPhone 版本中，而不仅仅是模拟版本。

【问题讨论】：

目前还不清楚您要在这里实现什么。能否添加您使用的 Area3 堆栈和导航流代码。
我改写了问题以使问题更清晰。

标签： reactjs routes nested expo native

【解决方案1】：

好的，嵌套导航的问题——无论是嵌套在选项卡导航中的堆栈导航还是相反——出现在 Android 模拟器或（在我的情况下）Expo iOS 模拟器中，是由于包中的库引用不兼容。 json。截至今天，以下集合允许 Expo/iOS 和 Android 模拟器正常运行：

"dependencies": {
    "@react-native-community/masked-view": "0.1.6",
    "@react-navigation/bottom-tabs": "^5.4.4",
    "@react-navigation/native": "^5.3.2",
    "@react-navigation/stack": "^5.3.5",
    "babel-preset-expo": "~8.1.0",
    "expo": "~37.0.3",
    "expo-constants": "^9.0.0",
    "expo-image-picker": "~8.1.0",
    "expo-location": "~8.1.0",
    "expo-permissions": "~8.1.0",
    "formik": "^2.1.4",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
    "react-native-gesture-handler": "~1.6.0",
    "react-native-reanimated": "~1.7.0",
    "react-native-safe-area-context": "0.7.3",
    "react-native-screens": "~2.2.0",
    "react-native-web": "~0.11.7",
    "yup": "^0.28.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6"
  },

【讨论】：