javascript - React Native SafeAreaView 背景颜色 - 如何为屏幕顶部和底部分配两种不同的背景颜色？

Question

我正在使用 React Native 0.50.1 中的 SafeAreaView，除了其中一部分之外，它的工作效果非常好。我将橙色背景颜色分配给 SafrAreaView，但无法弄清楚将底部不安全区域背景更改为黑色。

这是代码，我包括了预期结果和实际结果。 让屏幕底部变成黑色而不是橙色的最佳方法是什么？

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

我想要橙色上衣和黑色下衣。

但下面是我现在得到的。

Answer 1

我能够使用 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>
  );
}