隐藏的标签栏在 React Native 应用程序中突出显示

Question

我设置了导航选项：tabBarVisible: false。喜欢

export const AccountScreenNavigation = ({route, navigation}) => {
  try {
    let tabBarVisible = true;
    if (getFocusedRouteNameFromRoute(route) === 'LogInScreen') {
      **tabBarVisible = false;**
    }
    navigation.setOptions({
      **tabBarVisible: tabBarVisible,**
    });
  } catch {
    console.log('route state is undefined');
  }

  return (
    <Stack.Navigator headerMode={'None'}>
      <Stack.Screen name={'AccountsScreen'} component={AccountScreen} />
      <Stack.Screen name={'CreateAccount'} component={CreateAccount} />
      <Stack.Screen name={'LogInScreen'} component={LogInScreen} />
    </Stack.Navigator>
  );
};

没问题，但部分标签栏突出来了。

当我删除时

position: 'absolute',
bottom: 17,

从样式中，标签栏正常隐藏。

问题显示在这里：https://pasteboard.co/KaS9WWA.png

Answer 1

我正在解决问题。只需添加

safeAreaInsets: {
      bottom: 30,
},

在 tabBarOptions

隐藏的标签栏在 React Native 应用程序中突出显示

Hidden tab bar sticks out in React Native app

react-native

react-navigation

tabbar