android - React Native-Switching 选项卡不加载屏幕

Question

我正在通过 react-native 开发一个应用程序。我在主屏幕上添加了底部选项卡，当我通过 createBottomTabNavigator 执行此操作时它工作正常。

但是为了给 Android 带来不同的外观，当我使用 createMaterialBottomTabNavigator 时，这导致了荒谬的行为。当它第一次运行时，所有选项卡的屏幕都加载正常，但是当我从第二次开始切换选项卡时，屏幕变为空白。

请看代码附件。

import React, { useState } from 'react';
import { StyleSheet, Text, View, Platform, Modal } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { enableScreens } from 'react-native-screens';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import CategoriesScreen from './screens/CategoriesScreen';
import CategoryMealsScreen from './screens/CategoryMealsScreen';
import MealDetailScreen from './screens/MealDetailScreen';
import Colors from './constants/Colors';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import FavoriteScreen from './screens/FavoriteScreen';
import { Ionicons } from '@expo/vector-icons';

enableScreens();

const fetchFonts = () => {
  return Font.loadAsync({
    'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
  });
};

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setFontLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

  const Stack = createNativeStackNavigator();
  const MealsNavigator = () => {
    return (
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor:
              Platform.OS === 'android' ? Colors.primaryColor : '',
          },
          headerTintColor:
            Platform.OS === 'android' ? 'white' : Colors.primaryColor,
          mode: 'modal',
        }}
      >
        <Stack.Screen
          name="Categories"
          component={CategoriesScreen}
          options={{
            title: 'Meal Categories',
          }}
        />
        <Stack.Screen
          name="CategoryMeals"
          component={CategoryMealsScreen}
          options={{ title: '' }}
        />
        <Stack.Screen
          name="MealDetail"
          component={MealDetailScreen}
          options={{ title: ' ' }}
        />
      </Stack.Navigator>
    );
  };

  const FavoriteNavigator = () => {
    return (
      <Stack.Navigator
        screenOptions={{
          headerStyle: {
            backgroundColor:
              Platform.OS === 'android' ? Colors.primaryColor : '',
          },
          headerTintColor:
            Platform.OS === 'android' ? 'white' : Colors.primaryColor,
          mode: 'modal',
        }}
      >
        <Stack.Screen
          name="FavoriteScreen"
          component={FavoriteScreen}
          options={{ title: 'Favorites' }}
        />
      </Stack.Navigator>
    );
  };

  const Tab =
    Platform.OS === 'android'
      ? createMaterialBottomTabNavigator()
      : createBottomTabNavigator();

  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="All"
        activeColor={Colors.primaryColor}
        inactiveColor="#3e2465"
        screenOptions={{
          tabBarActiveTintColor: Colors.accentColor,
          tabBarActiveBackgroundColor: Colors.primaryColor,
        }}
      >
        <Tab.Screen
          name="All"
          component={MealsNavigator}
          options={{
            headerShown: false,
            tabBarIcon: (tabInfo) => {
              return (
                <Ionicons
                  name="ios-restaurant"
                  size={25}
                  color={tabInfo.color}
                />
              );
            },
          }}
        />
        <Tab.Screen
          name="Favorites"
          component={FavoriteNavigator}
          options={{
            headerShown: false,
            tabBarIcon: (tabInfo) => {
              return (
                <Ionicons name="ios-heart" size={25} color={tabInfo.color} />
              );
            },
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({});
```[![blank screen and screen loaded for first time[![\]\[1\]][1]][1]][2]


  [1]: https://i.stack.imgur.com/qsuzw.jpg
  [2]: https://i.stack.imgur.com/1nvYj.jpg

标签： androidreact-nativereact-navigation