React Native SafeAreaView 背景颜色 - 如何为屏幕顶部和底部分配两种不同的背景颜色?
我正在使用 React Native 0.50.1 中的 SafeAreaView
并且它工作得很好,除了一部分.我为 SafrAreaView 指定了橙色背景色,但不知道将底部不安全区域背景更改为黑色.
I'm using SafeAreaView
from React Native 0.50.1 and it's working pretty good except for the one part. I assigned the orange background color to the SafrAreaView but can't figure out to change the bottom unsafe area background to black.
这是代码,我包括了预期结果和实际结果.使屏幕底部变黑而不是橙色的最佳方法是什么?
Here is the code and I included expected the result and actual result. What is the best way to make the bottom part of the screen black instead of orange?
import {
...
SafeAreaView
} from 'react-native';
class Main extends React.Component {
render() {
return (
<SafeAreaView style={styles.safeArea}>
<App />
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
...,
safeArea: {
flex: 1,
backgroundColor: '#FF5236'
}
})
我想要橙色上衣和黑色下装.
I want to have orange top and black bottom.
但下面是我现在得到的.
But below is what I get now.
我能够使用 Yoshiki 和 Zach Schneider 的答案的一个版本来解决这个问题.请注意您如何设置顶部 SafeAreaView 的 flex:0
使其不展开.
I was able to solve this using a version of Yoshiki's and Zach Schneider's answers. Notice how you set the top SafeAreaView's flex:0
so it doesn't expand.
render() {
return (
<Fragment>
<SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
<SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
<View style={{ flex: 1, backgroundColor: 'white' }} />
</SafeAreaView>
</Fragment>
);
}