[英]How do I set the color of the notch on iPhone X in React Native
I have been testing my application on an iPhone X via iOS Simulator. 我一直在通过iOS模拟器在iPhone X上测试我的应用程序。 I would like to know how I can recolour the black notch to the same color as my application theme.
我想知道如何将黑色凹槽重新调整为与我的应用主题相同的颜色。
Here's the current implementation: 这是当前的实现:
How do I change the black bar to blue, matching my theme? 如何将黑条更改为蓝色,与我的主题相匹配?
You can simply use SafeAreaView from react-native new version 51. 您可以简单地使用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'
}
})
See: How to set iOS status bar background color in React Native? 请参阅: 如何在React Native中设置iOS状态栏背景颜色?
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;
Screenshot: iPhone X on left 屏幕截图:左侧是iPhone X.
通过使用XCode将应用程序启动屏幕从图像资源更改为故事板,可以解决此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.