5

我正在使用带有 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",
  }
});

在此处输入图像描述

4

7 回答 7

1

尝试这个

  screenOptions={{
                        tabBarStyle: {
                            paddingBottom:0,         
                        },
                }}
于 2021-10-28T21:04:09.553 回答
0

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

我使用了 React 导航 v6。

问题 image1，问题 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" },
  }}
>
...

然后结果图像是这样的。

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

于 2021-11-16T07:35:25.480 回答
0
  1. 请使用 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",
  }
});
于 2019-07-29T08:42:44.027 回答
0

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

制表符const Tab = createBottomTabNavigator()

无论我如何使用SafeAreaView.

我通过不使用 TabBarIcon 属性来解决它，而是tabBar在更高级别上Tab.Navigator为属性制作自定义组件，如反应原生文档https://reactnavigation.org/docs/bottom-tab-navigator/中所述

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

于 2021-12-30T19:29:01.953 回答
0

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

在您的示例中，这将是：

return (
    <View>
        <TabNavigator style={{ backgroundColor: "#2F3438" }} key="MainTabNav" />
    </View>
);
于 2019-11-26T16:08:16.407 回答
0

用于反应原生导航 V5

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

注意：这是底部标签

于 2020-09-27T07:04:30.860 回答
0 
<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
于 2020-09-14T12:28:05.997 回答