我在应用程序的根目录处有SafeAreaView，但我希望在应用程序中的几个屏幕上使用全屏backgroundColor（包括safeAreaView的顶部和底部）

Question

我在项目App.js的根目录中使用SafeAreaView。但是某些屏幕需要从上到下为全白色背景。由于我是在根本上使用SafeAreaView的，因此每个屏幕视图都在SafeAreaView之后开始，即使以absolute高度的SafeAreaView位置进行视图也不是这样的：< / p>

render() {
  return (
    <View style={styles.container}>
      <View style={[styles.hideSafeAreaView, { top: 0 }]} />
      {/*....*/}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: whiteTextColor,
    padding: 12
  },
  hideSafeAreaView: {
    position: "absolute",
    backgroundColor: whiteTextColor,
    right: 0,
    left: 0,
    height: 44
  }
});

这是我的app.js

render() {
  return (
    <ImageBackground style={styles.container} source={APP_BACKGROUND_IMAGE}>
      <SafeAreaView style={styles.container}>
        <AppNavigator />
      </SafeAreaView>
    </ImageBackground>
  );
}

谢谢。

Answer 1

我发现了一个简单的窍门。我删除了SafeAreaView表单根组件，并创建了一个高度为44的自定义标头。在希望SafeAreaView工作的所有文件中都使用了可重复使用的标头。