反应本机安全区域视图背景颜色-如何分配两个不同的背景颜色的顶部和底部的屏幕？

我可以用绝对位置黑客技术解决这个问题。请参见下面的调整。无论如何都不是未来的证据，但它解决了我的问题。

import {
...
SafeAreaView,
View
} from 'react-native';
class Main extends React.Component {
render() {
return (
<SafeAreaView style={styles.safeArea}>
<App />
<View style={styles.fixBackground} />
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
...,
safeArea: {
flex: 1,
backgroundColor: '#FF5236'
},
fixBackground: {
backgroundColor: 'orange',
position: 'absolute',
bottom: 0,
right: 0,
left: 0,
height: 100,
zIndex: -1000,
}
})

我刚刚遇到了同样的问题，我们在顶部有一个导航栏，在底部有一个标签栏，有两种不同的背景颜色。

我的解决方案是用正确的背景颜色将标签栏组件包装在 SafeAreaView中，同时用它自己的背景颜色包装导航栏组件。

return (
<SafeAreaView style=\{\{ backgroundColor: 'white' }}>
<Animated.View style={heightAnim}>
{...navBarComponentStuff}
</Animated.View>
</SafeAreaView>)

用于导航栏

这个是 Tab Bar 的:

<SafeAreaView style={this.props.tabBarStyle}> //Some dark grey color is passed here
<Animated.View style={heightAnim}>
{tabBarItems.map(render tabs.....}
</Animated.View>
</SafeAreaView>}

所以，也就是说，你可以把你的导航组件包裹在一个设置了橙色样式的 SafeAreaView中，然后把你的主要内容包裹在另一个 SafeAreaView中，用黑色作为背景颜色样式，或者任何你选择的颜色。

有一件事你应该知道，如果你在同一个组件中加入两个 SafeAreaView，比如:

return (
<View style={styles.container}>
<SafeAreaView style=\{\{ backgroundColor: 'white' }}>
<NavigationBarComponent />
</SafeAreaView>
<SafeAreaView style={this.props.tabBarStyle}>
<Animated.View style={heightAnim}>
<Animated.View style={[styles.tabBar, this.props.tabBarStyle]}>
{map and render tabs}
</Animated.View>
</Animated.View>
</SafeAreaView>
</View>
);

它将结合两个 SafeAreaView的，或者至少是它看起来像我，也许有人更多的经验与这可以解释在这种情况下发生了什么。

这将我的标签栏推到屏幕的顶部，并设置背景颜色为白色时，我这样做。

但是把 SafeAreaVeiw的顶端移动到 NavigationBarComponent上给了我想要的效果。

对于那些可能感兴趣的人，也许这就是为什么它在同一视图中两个时髦的原因，AnimatedView是因为我们有时隐藏导航和标签栏。

我遇到了同样的问题，并能够用以下方法解决:

const styles = StyleSheet.create({
outerWrapper: {
backgroundColor: 'orange',
},
innerWrapper: {
backgroundColor: 'black',
},
});


// snip


const MyComponent = ({ content }) => (
<View style={styles.outerWrapper}>
<SafeAreaView />


<SafeAreaView style={styles.innerWrapper}>
{content}
</SafeAreaView>
</View>
);

outerWrapper在顶部应用橙色背景色。第一个 <SafeAreaView />将第二个向下推，以便它从“安全区域”的开始(在状态栏的下面)开始。然后第二个 SafeAreaView占据屏幕的其余部分(包括底部的“不安全”区域)并给它黑色的背景颜色。

您可以使用 Fragment从呈现方法返回多个 SafeAreaView，每个 SafeAreaView独立地指定它们的 backoundColor:

render = () => (
<Fragment>
<SafeAreaView style=\{\{ flex: 0.5, backgroundColor: "red" }} />
<SafeAreaView style=\{\{ flex: 0.5, backgroundColor: "blue" }} />
</Fragment>
);

IPhone X 的结果:

我可以用 Yoshiki 和 Zach Schneider 的答案来解决这个问题。请注意如何设置顶部 SafeAreaView 的 flex:0，使其不会展开。

render() {
return (
<Fragment>
<SafeAreaView style=\{\{ flex:0, backgroundColor: 'red' }} />
<SafeAreaView style=\{\{ flex:1, backgroundColor: 'gray' }}>
<View style=\{\{ flex: 1, backgroundColor: 'white' }} />
</SafeAreaView>
</Fragment>
);
}

我能够通过下面的代码实现这一点,

<View style=\{\{
flex: 1
}}>
<SafeAreaView style=\{\{
flex: 0,
backgroundColor: 'red'
}}>
</SafeAreaView>
<View style=\{\{
flex: 1,
top: 0,
backgroundColor: 'white'
}}>
</View></View>

感谢@Daniel M，他的回答给了我灵感。

解决方案: 我遇到了这个问题，但是我不明白你们为了解决这个问题所做的努力。 这个应用程序在一个容器中，可以容纳所有的屏幕。SafeAreaView 将把应用程序包装到一个新的更小的容器中。因此，将样式添加到主容器中，这样您就可以拥有所需的背景。就这么简单:

<View style=\{\{flex:1, backgroundColor: "black"}}>
<SafeAreaView style=\{\{flex:1, backgroundColor: "white"}}>
<App />
</SafeAreaView>
</View>

仅此而已，希望对你们有所帮助;)

在2022年，我能够通过使用 SafeAreaView的 edges道具来解决这个问题！

<>
<SafeAreaView
edges={["top"]}
style=\{\{ flex: 0, backgroundColor: "#0a2352" }}
/>
<SafeAreaView
edges={["left", "right", "bottom"]}
style=\{\{
flex: 1,
backgroundColor: "#fff",
position: "relative",
}}
>
...
</SafeAreaView>
</>

<Fragment>在任何 Android 设备上都不能正常工作，所以为了解决这个问题，我尝试了这个解决方案，它在 Android 和 ios 上都能正常工作:

<SafeAreaView style=\{\{ flex:1, backgroundColor: 'red' }}>
<View style=\{\{ flex: 1, backgroundColor: 'green' }} >
<Text>Hello</Text>
</View>
</SafeAreaView>

如果您需要不同颜色的 SafeAreaView 的顶部或底部栏，只需覆盖与视图组件(定位绝对) ，并得到其高度从 useSafeAreaInsets 钩。

import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
            

<SafeAreaView style=\{\{ flex: 1 }}>
<View style=\{\{
position: 'absolute'
height: useSafeAreaInsets().top,
backgroundColor:'red'
}} />
</SafeAreaView>