我正在构建一个应用程序，用户可以在其中查看不同语言的信息。用户还可以选择显示信息的语言。但是，在尝试为导航栏设置语言时遇到了问题。我正在使用React Navigation Native创建导航栏，并使用Context挂钩从另一个组件获取所选语言。如果在Navigator中使用if语句，则会出现错误：
错误：找不到导航器的任何屏幕。是否已将任何屏幕定义为其子项？
根据我的理解，应用程序在挂载时没有得到变量“locale”，也没有任何东西可以显示。我该如何避免这种情况（我应该在某处使用异步函数吗？）
这是我的代码：
App.js程式码

function App() {
  const [locale, setLocale] = useState("en");

  return (
    <LanguageContext.Provider value={{ locale, setLocale }}>
      <MainContainer />
    </LanguageContext.Provider>
  );
}

LanguageContext.js

import { createContext } from "react";

export const LanguageContext = createContext("");

MainContainer.js

const profileName = "Profile";
const detailsName = "Details";
const settingsName = "Settings";
const profileNameFR = "P";
const detailsNameFR = "D";
const settingsNameFR = "S";

const Tab = createBottomTabNavigator();

export default function MainContainer() {
  const { locale } = useContext(LanguageContext);
  
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            let rn = route.name;

            if (rn === profileName || rn === profileNameFR) {
              iconName = focused ? "person" : "person-outline";
            } else if (rn === detailsName || rn === detailsNameFR) {
              iconName = focused ? "list" : "list-outline";
            } else if (rn === settingsName || settingsNameFR) {
              iconName = focused ? "settings" : "settings-outline";
            }

            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: "tomato",
          inactiveTintColor: "grey",
          tabBarStyle: { padding: 10, height: 60 },
          tabBarLabelStyle: { paddingBottom: 10, fontSize: 10 },
          style: { padding: 10 },
        })}
      >
        {locale === "en" && (
          <>
            <Tab.Screen name={profileName} component={ProfileScreen} />
            <Tab.Screen name={detailsName} component={DetailsScreen} />
            <Tab.Screen name={settingsName} component={SettingsScreen} />
          </>
        )}
        {locale === "fr" && (
          <>
            <Tab.Screen name={profileNameFR} component={ProfileScreen} />
            <Tab.Screen name={detailsNameFR} component={DetailsScreen} />
            <Tab.Screen name={settingsNameFR} component={SettingsScreen} />
          </>
        )}
      </Tab.Navigator>
    </NavigationContainer>
  );
}