react-native - 标签下的 React Native Tab Bar 空白

Question

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

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

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

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

2.如果您在安全区域 View 中使用标签栏，请使用安全区域 View 的强制插入属性: <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",
  }
});