reactjs - 嵌套导航——标签内的堆栈或堆栈内的标签——在 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 模拟器中是由于 package.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"
},
推荐阅读
- python-3.x - Python 请求未提取所有元素
- javascript - 将项目推送到数组
- javascript - 在 json 中查找密钥
- azure-functions - 如何在 Azure 函数中使用带有 blob 绑定的动态连接字符串
- python - 如何产生一个列表以将值流式传输到烧瓶?
- android - Firebase 存储 OnSuccessListener 不起作用
- android - 为什么 customView 可以扩展 constraintLayout 但会膨胀线性布局
- ruby-on-rails - AASM 不会触发 ActiveRecord::Rollback
- c# - Castle Windsor 使用 RestSharp.RestClient 构造函数注册错误
- python - 将 numpy 数组作为灰度图像上传到 S3 存储桶