我的代码在大多数 iPhone 上都可以正常工作,但在 Iphone 5 上,状态栏已被 View 覆盖,我不知道如何在 Iphone 5 中为 View 设置边距,仅当我在 View 中使用顶部边距时,它看起来在其他 iPhone 中很奇怪
componentWillMount() {
this.startHeaderHeight = 45
this.marginTopHeader = 0
this.iconMargin = 9
if (Platform.OS == 'android') {
this.startHeaderHeight = 30 + StatusBar.currentHeight
this.marginTopHeader = 23 + this.marginTopHeader
this.iconMargin = this.iconMargin
}
}
render() {
var width = Dimensions.get('window').width - 128;
var height = Dimensions.get('window').height;
return (
<SafeAreaView style={{
height: this.startHeaderHeight, flexDirection: 'row',
borderBottomColor: '#ddd', backgroundColor: '#3A3658', marginTop: this.marginTopHeader
}} >
<Icon
lightTheme
style={{ marginLeft: 8, marginRight: 5, marginTop: this.iconMargin, color: 'white' }} size={25} name="ios-menu" onPress={() => {
this.props.draw();
}} />
<View style={{position: 'absolute', right: 7}}>
<Icon style={{ color: '#fff',marginTop: this.iconMargin ,padding:0,}} size={25} name="ios-cart" onPress={() => {
this.props.cart();
}}>
<Text style={{color:'red', fontWeight:'bold', fontSize:10}}>{this.props.cartItemCount}</Text>
</Icon>
</View>
</SafeAreaView >
Best Answer-推荐答案 strong>
你可以试试这样写。
<View style={{flex: 1, backgroundColor: 'white'}} >
{/* header */}
<View style={{paddingTop: system.ios.x ? 22 : 0}}>
<View style={{
height: Platform.select({ios: 64, android: 44}),
backgroundColor: 'white',
justifyContent: 'flex-end'
}}>
`enter code here`
</View>
</View>
</View>
关于ios - Iphone 5 状态栏被 React Native 覆盖,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/52938923/
|