当我多次使用 Tab.Screen 时，底部标签不显示文本

问题描述

当我使用 Tab.Screen 3 次时，我在反应导航中遇到问题，它显示底部选项卡文本，但是当我执行 4 次时，它不显示底部文本，除了（当我单击其他选项卡时，它开始显示活动选项卡文本并隐藏其他 3 个标签文本） 这是我的代码

import { Text,View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1,justifyContent: 'center',alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function Weather() {
  return (
    <View style={{ flex: 1,alignItems: 'center' }}>
      <Text>Weather</Text>
    </View>
  );
}


function Cab() {
  return (
    <View style={{ flex: 1,alignItems: 'center' }}>
      <Text>Cab!</Text>
    </View>
  );
}


function Alert() {
  return (
    <View style={{ flex: 1,alignItems: 'center' }}>
      <Text>Alert!</Text>
    </View>
  );
}

const Tab = createMaterialBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Weather" component={Weather} />
        <Tab.Screen name="Cab" component={Cab} />
        <Tab.Screen name="Alert" component={Alert} />

      </Tab.Navigator>
    </NavigationContainer>
  );
}

当我使用 Tab.Screen 3 次时的输出

        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Weather" component={Weather} />
        <Tab.Screen name="Cab" component={Cab} />

Android Screen of 3 Tabs

当我使用 Tab.Screen 4 次时的输出

        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Weather" component={Weather} />
        <Tab.Screen name="Cab" component={Cab} />
        <Tab.Screen name="Alert" component={Alert} />

Android Screen of 4 Tabs

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）