我在我的项目 App.js 的根目录中使用 SafeAreaView。但是有些屏幕需要从上到下全白背景。由于我在 root 中使用 SafeAreaView,因此每个屏幕 View 都在 SafeAreaView 之后开始,即使使用 absolute 位置的 SafeAreaView 高度的 View 也不能像这样工作:

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

提前致谢。

最佳答案

我找到了一个简单的技巧来做到这一点。我删除了 SafeAreaView 表单根组件并制作了一个高度为 44 的自定义 Header。我在希望 SafeAreaView 工作的所有文件中都使用了这个可重用的 Header。

10-08 12:49