我的应用程序的根目录下有 SafeAreaView ，但我想要在应用程序中的几个屏幕上有全屏背景颜色（包括 safeAreaView 的顶部和底部）

Question

SafeAreaView我在项目 App.js 的根目录中使用。但有些屏幕需要从上到下全白背景。由于我SafeAreaView在根目录中使用，因此每个屏幕视图在创建具有高度位置的SafeAreaView视图后都不会像这样工作：absoluteSafeAreaView

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 工作的所有文件中使用了这个可重用标头。