You can simply use SafeAreaView from react-native new version 51.
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?
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
通过使用XCode将应用程序启动屏幕从图像资源更改为故事板,可以解决此问题。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.