iPhoneXでSafeAreaViewの上部と下部に異なる色を付ける方法

Question

この質問はすでに回答されていますが、提案されたソリューションは機能していません。

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

私に与えるべきです：

代わりに私にくれた：

ご覧のとおり、表示順序は同じではありません。

iOSでも同じ問題が発生します。

私はreactを使用しています16.13.1、多分最後の答えから何かが変わったのですか？

私の選択肢は何ですか？

ありがとう

Answer 1

React 16.13.1を使用すると、次のことがうまくいきました。

return (
        <Fragment>
            <SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "red"}}/>
            <View style={{flex: 1, backgroundColor: "white"}}/>
            <SafeAreaView style={{flex: Platform.OS === "android" ? 0.03 : 0, backgroundColor: "gray"}}/>
        </Fragment>
    );

iOSのスクリーンショット：

Androidのスクリーンショット：

Answer 2

私の経験では、StatusBarからreact-nativeは私のためにうまくいきました。例：

import { StatusBar } from 'react-native';

return (<Fragment>
    <StatusBar
        backgroundColor="#f00"
        barStyle="light-content"
    />
<Fragment>);

乾杯。