react-native 底部导航器没有完全隐藏底部标签，它正在向上

Question

请帮助我。 我制作聊天用户界面。 这个问题让我恶心... 请给我一个建议。

我的情况如下

我的代码是这样的。 你可以很容易地理解我的代码..

App.js // BottomTabNavigator 部分

const Tab = createBottomTabNavigator();
    const App = () => {
      const visible = (route) => {
        if (route.state?.index > 0) {
          return false;
        } else {
          return true;
        }
      };
    
      return (
        <>
          <StatusBar barStyle="dark-content" />
          <SafeAreaView style={{flex: 1}}>
            <NavigationContainer>
              <Tab.Navigator
                tabBarOptions={{
                  activeTintColor: 'red',
                  inactiveTintColor: 'blue',
                }}>
                <Tab.Screen
                  name={'chat'}
                  component={Chat}
                  options={({route}) => ({
                    tabBarVisible: visible(route),
                  })}
                />
                <Tab.Screen name={'setting'} component={Setting} />
              </Tab.Navigator>
            </NavigationContainer>
          </SafeAreaView>
        </>
      );
    };

Chat.js // StackNavigator 部分

const Stack = createStackNavigator();
const Chat = ({navigation}) => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="chatlist" component={Chatlist} />
      <Stack.Screen name="chatroom" component={Chatroom} />
    </Stack.Navigator>
  );
};

聊天列表.js

const Chatlist = ({route, navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <TouchableOpacity onPress={() => navigation.navigate('chatroom')}>
        <Text>chatlist</Text>
      </TouchableOpacity>
    </View>
  );
};

Chatroom.js

const Chatroom = () => {
  return (
    <View style={{flex: 1, backgroundColor: 'red'}}>
      <Text>Chatroom</Text>
    </View>
  );
};

Answer 1

尝试删除 SafeAreaView

const Tab = createBottomTabNavigator();
    const App = () => {
      const visible = (route) => {
        if (route.state?.index > 0) {
          return false;
        } else {
          return true;
        }
      };
    
      return (
            <NavigationContainer>
              <Tab.Navigator
                tabBarOptions={{
                  activeTintColor: 'red',
                  inactiveTintColor: 'blue',
                }}>
                <Tab.Screen
                  name={'chat'}
                  component={Chat}
                  options={({route}) => ({
                    // Delete tabBarVisible here ======>
                    // tabBarVisible: visible(route),
                  })}
                />
                <Tab.Screen name={'setting'} component={Setting} />
              </Tab.Navigator>
            </NavigationContainer>
      );
    };