0

问题：

当我第一次导航到材料底部内的堆栈时，一切正常，之后您更改选项卡并且当您返回内容时不再渲染。

预期行为：

每次选择选项卡时，都必须渲染堆栈。换句话说，每次我导航到选项卡时，我都能在选项卡内看到堆栈的内容。

包裹 版本
@react-导航/本机 6.0.6
@react-navigation/material-bottom-tabs 6.0.9
@react-navigation/native-stack 6.2.5
反应原生安全区域上下文 3.3.2
反应原生屏幕 3.8.0
反应式 0.64.2
世博会 43.0.0
4

1 回答 1

0

面临同样的问题。

在这里找到解决方案：https ://github.com/software-mansion/react-native-screens/issues/1197#issuecomment-993682256

您应该使用具有可折叠 false 的视图来包装嵌套导航器。我的代码示例：

const MealsNavigator = () => (
    <NavigationContainer>
        <TabNavigator />
    </NavigationContainer>
)

const TabNavigator = () => (
    <Tab.Navigator initialRouteName="Meals" {...TabProps} >
        <Tab.Screen name="Meals" component={StackNavigator} options={{ headerShown: false, tabBarIcon: ({ color }) => (<Ionicons name='ios-restaurant' size={24} color={color} />), tabBarColor: Colors.primaryColor }} />
        <Tab.Screen name="Favorites" component={FavoritesScreen} options={{ tabBarIcon: ({ color }) => (<Ionicons name='ios-star' size={24} color={color} />), tabBarLabel: 'Favorites!', tabBarColor: Colors.accentColor }} />
    </Tab.Navigator>
)

const StackNavigator = () => (
    <View style={{ flex: 1 }} collapsable={false}>
        <Stack.Navigator initialRouteName="Categories" screenOptions={{
            headerStyle: { backgroundColor: Platform.OS === "android" ? Colors.primaryColor : '' }, headerTintColor: Platform.OS === "android" ? 'white' : Colors.primaryColor
        }} >
            <Stack.Screen name="Categories" component={CategoriesScreen} options={{ title: 'Meal Categories' }} />
            <Stack.Screen name="CategoryMeals" component={CategoryMealsScreen} options={({ route }) => ({ title: route.params.title })} />
            <Stack.Screen name="MealDetail" component={MealDetailScreen} options={({ route }) => ({ title: route.params.title })} />
        </Stack.Navigator>
    </View>
)
于 2022-01-01T23:37:55.353 回答