如何在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

请参阅：How to set iOS status bar background color in React Native?

• 对于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来解决此问题。