Reactnative SafeAreaView 背景 colored颜色 如何为屏幕的顶部和底部分配两种不同的背景 colored颜色

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

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相关问答推荐

ITMS—91053：缺少API声明—ReactNative

在原生react 中更改图像源URI时闪烁

react 本机中的TextInput对齐中的长文本

如何在Reaction本地日历中 Select 年份？

使用FETCH发送BLOB/文件时为空

我应该什么时候调用 realm.close()？

错误：看起来您在另一个中嵌套了一个NavigationContainer

错误： Unable to determine the current character, it is not a string, number, array, or object in react-native for android

使用离线包在 iOS 设备上运行 react-native 应用程序

如何在 Text ReactNative 中包含 TouchableOpacity

在 React Native (iOS) 中支持动态类型

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.

React Native require(image) 返回数字

React Native Bullet Character？ or Unicode？

我将如何根据百分比为按钮的宽度设置动画，并且它的背景 colored颜色 也是如此？

WebStorm + ReactNative？

React Context：TypeError：render is not a function

React 本机矢量图标在当前版本 0.60 上不起作用

加载字体native-base 错误

将现有的 React Native 项目转换为 Expo