在标签下反应本机标签栏空白

Question

我在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",
  }
});

Answer 1

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

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

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",
  }
});

Answer 2

我遇到了完全相同的问题，我没有在标签栏周围完全使用SafeAreaView，而是简单地分配了我希望将白色空间用作标签栏背景色的颜色。 / p>

在您的示例中为：

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

Answer 3

<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

Answer 4

用于响应本机导航V5

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

注意：这是用于底部标签