如何解决嵌套导航 -- 标签内堆栈或堆栈内标签 -- 在 React Native 中
标签导航中的堆叠导航无法正常工作。
<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 版本的应用程序中,而不仅仅是在模拟版本中。
解决方法
好的,出现在 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"
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。