Javascript 如何在React Native中设置iPhone X上的槽口颜色

我一直在通过iOS模拟器在iPhoneX上测试我的应用程序。我想知道如何将黑色凹口恢复到与我的应用程序主题相同的颜色

以下是当前的实现：

---

如何将黑条更改为蓝色，以匹配我的主题？

这是通过使用XCode将应用程序启动屏幕从图像资源更改为情节提要来解决的。

请参阅：

• 对于iPhoneX，将StatusBarHeightIos从20增加到30
• 我使用react本机设备信息来检测设备

从“反应本机设备信息”导入设备信息

//getModel:iPhoneX
//getDeviceId:iPhone10,3
const ModelIphoneX='iphonex'

//StatusBarHeight是承运人信息和日期显示在顶部的位置
//iPhoneX在传感器包所在的显示器顶部有一个切口。
//对于iPhone X，请增加高度，以便剪切不会隐藏文本
const StatusBarHeightIos=DeviceInfo.getModel（）==ModelIphoneX？30 : 20;
const StatusBarHeight=Platform.OS=='ios'？StatusBarHeightIos:0；

屏幕截图：左侧的iPhoneX

---

您只需使用react native新版本51中的SafeAreaView即可

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

导入{
...
安全区域视图
}从“反应本机”；
类Main扩展了React.Component{
render（）{
返回(
)
}
}
const styles=StyleSheet.create({
...,
安全区：{
弹性：1，
背景颜色：“#FF5236”
}
})

如果您想给状态栏（显示时间和电池指示器的区域）上色，那么这个问题可能会有所帮助。我正在删除我目前的答案，因为它不相关丹，在这里看看我的答案，希望它能解决你的问题（底部与CSS有关）答案可以在这里找到：它像一个魅力，你救了我一天！