标签下的 React Native Tab Bar 空白

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}这将使安全区域视图与底部区域碰撞，并且您的标签栏将正确渲染。注意：通过使用此方法，您必须在提供样式时更加准确。

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