我在我的项目 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。