react-native - 如何使用 Iphone X 在 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，也许自上一个答案以来发生了一些变化？

我的替代方案是什么？

谢谢

标签： react-nativeiphone-x

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截图：

安卓截图：