选项卡下的 React Native Tab Bar 空白答案

【问题标题】：React Native Tab Bar white space under tabs选项卡下的 React Native Tab Bar 空白
【发布时间】：2019-12-06 08:42:21
【问题描述】：

我正在使用带有 SafeAreaView 的标签栏导航器。

如果我注释掉标签栏导航，父视图会覆盖整个屏幕。但是，当我添加标签栏时，它会在标签栏部分下显示一个小的白色视图。

const App = () => {
  return (
    <SafeAreaView style={styles.droidSafeArea}>
      <View style={{ backgroundColor: "red", flex: 1 }}>
        <TabNavigator key="MainTabNav" />
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  droidSafeArea: {
    flex: 1,
    backgroundColor: "#2F3438",
  }
});

【问题讨论】：

您是否为上述屏幕提供了整个代码段。无法从提供的代码中找出黄色区域。
你可以尝试删除flex => <View style={{ backgroundColor: "red" }}>
尝试通过在每个视图的样式中添加borderWidth:1 来检查哪个视图造成了差距
您找到解决方案了吗？我也面临同样的问题
@RomitKumar 在下面试试我的答案。

标签： react-native tabbar safeareaview

【解决方案1】：

试试这个

  screenOptions={{
                        tabBarStyle: {
                            paddingBottom:0,         
                        },
                }}

【讨论】：

【解决方案2】：

请使用 safeAreaView 之外的标签栏，否则安全区域视图将计算缺口并将标签栏呈现在缺口上方。

2.如果您在安全区域视图中使用标签栏，请使用安全区域视图的强制插入属性：<SafeAreaView forceInset = {bottom : 'never} 这将使安全区域视图与底部区域发生碰撞，并且您的标签栏将正确呈现。注意：通过使用这种方法，您必须在提供样式时有点准确。

const App = () => {
  return (
    <SafeAreaView style={styles.droidSafeArea} forceInset = {bottom : 'never'}>
      <View style={{ backgroundColor: "red", flex: 1 }}>
        <TabNavigator key="MainTabNav" />
      </View>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  droidSafeArea: {
    flex: 1,
    backgroundColor: "#2F3438",
  }
});

【讨论】：

该样式的标签栏下方仍有空隙
我需要克隆您的代码，然后在我的系统上运行它来解决问题。如果不在我的系统上运行，就很难调试问题。 :(

【解决方案3】：

我遇到了完全相同的问题，我所做的不是在标签栏周围使用SafeAreaView，而是简单地将我希望空白区域具有的颜色指定为标签栏的背景颜色。

在你的例子中是：

return (
    <View>
        <TabNavigator style={{ backgroundColor: "#2F3438" }} key="MainTabNav" />
    </View>
);

【讨论】：

【解决方案4】：

<NavigationContainer>
     <Tab.Navigator
         tabBarOptions={{
             activeTintColor: Colors.tabIconSelected,
             inactiveTintColor: Colors.tabIconDefault,
             style: styles.container
         }}/>
</NavigationContainer>

const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.darkBackgroundColor,
        borderTopWidth: 0
    }
});

Note : borderTopWidth: 0 worked for me

【讨论】：

【解决方案5】：

React Native Navigation V5

<Tab.Navigator
 tabBarOptions={{
  style: {
   borderTopWidth: 0
}
}}
>
   <Tab.Screen/>
<Tab.Navigator>

注意：这是底部标签

【讨论】：

【解决方案6】：

当我在bottomTabNavigation 跟随this post 上实现浮动按钮时，我遇到了类似的问题，即tabBar 有带阴影的脏空白（我在组件样式中使用了阴影）。

我使用了 React 导航 v6。

issue image1, issue image2（抱歉，这是我发布的第一个答案，我还不能嵌入图片）

我尝试使用borderWidth: 0 删除它，但没有成功。

我的情况，下面对我有用。

试试这个

borderRadius: 25  // some much number that near tabbar height

开

<Tab.Navigator
  tabBar={(props) => (
    <View style={styles.navigatorContainer}>
      <BottomTabBar {...props} />
      {isIphoneX() && (
        <View
          style={[
            styles.xFillLine,
            { backgroundColor: "#fff" },
          ]}
        />
      )}
    </View>
  )}
  screenOptions={{
    headerShown: false,
    tabBarShowLabel: false,
    tabBarStyle: { 
                   borderRadius: 25,                // add here
                   borderTopWidth: 0,
                   borderRadius: 25,
                   backgroundColor: "transparent",
                   elevation: 30,
    },
    tabBarItemStyle: { backgroundColor: "#fff" },
  }}
>
...

那么结果图片是this。

我不明白为什么它有效，但我希望它适用于某人。

【讨论】：

【解决方案7】：

我在 Tab.Screen 中使用 TabBarIcon 属性时遇到了这个问题

标签为const Tab = createBottomTabNavigator()

无论我如何使用SafeAreaView，我都无法解决问题。

我解决了这个问题，不使用 TabBarIcon 属性，而是在更高级别的 Tab.Navigator 上为 tabBar 属性制作自定义组件，如 react native 文档 https://reactnavigation.org/docs/bottom-tab-navigator/ 中所述

当我创建自定义 tabBar 组件时，它都按预期工作，没有使用 SafeAreaView 的时髦。

【讨论】：