react-native从0.50.1开始,提供了SafeAreaView来确保iPhone X的兼容性,效果如下:
代码如下:
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: '#ddd'
}
})
并且,SafeAreaView会在接打电话等需要调整状态栏高度的时候自动调整状态栏的高度: