javascript - 如何在 React Native 中设置 iPhone X 上刘海的颜色

Question

我一直在通过 iOS 模拟器在 iPhone X 上测试我的应用程序。我想知道如何将黑色缺口重新着色为与我的应用程序主题相同的颜色。

这是当前的实现：

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

Answer 1

您可以简单地使用 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'
 }
})

Answer 2

请参阅：如何在 React Native 中设置 iOS 状态栏背景颜色？

• 对于 iPhone X，将 StatusBarHeightIos 从 20 增加到 30
• 我使用 react-native-device-info 来检测设备

import DeviceInfo from 'react-native-device-info';

// getModel: iPhone X // getDeviceId: iPhone10,3 const ModelIphoneX = 'iPhone X';

// StatusBarHeight is where Carrier info and date display at top // iPhone X has a cut-out in top of dispaly where sensor package is located. // For iPhone X increase height so cut-out does not hide text const StatusBarHeightIos = DeviceInfo.getModel() === ModelIphoneX ? 30 : 20; const StatusBarHeight = Platform.OS === 'ios' ? StatusBarHeightIos : 0;

截图：左边的 iPhone X

Answer 3

通过使用 XCode 将应用程序启动屏幕从图像资产更改为 Storyboard，可以解决此问题。