React Native SafeAreaView 背景颜色 - 如何为屏幕顶部和底部分配两种不同的背景颜色? [英] React Native SafeAreaView background color - How to assign two different background color for top and bottom of the screen?

问题描述

我正在使用 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>
  );
}

这篇关于React Native SafeAreaView 背景颜色 - 如何为屏幕顶部和底部分配两种不同的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！