[英]Nested navigation — Stack within Tab or Tab within Stack — in 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 版本中,而不僅僅是在模擬版本中。
Ok, this problem with nested navigation--either stack navigation nested within tab navigation or the reverse--that appears in the Android simulator or (in my case) with the Expo iOS simulator is due to incompatible library references within package.json. 截至今天,以下集合允許 Expo/iOS 和 Android 模擬器正確地使用 function:
"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"
},
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.