Iphone 5 状态栏被 React Native 覆盖

Posted 2023-04-18

【中文标题】Iphone 5 状态栏被 React Native 覆盖

【英文标题】：Iphone 5 status bar is being covered React Native

【发布时间】：2019-03-27 02:15:15

【问题描述】：

我的代码在大多数 iPhone 上都可以正常工作，但在 Iphone 5 上，状态栏已被视图覆盖，我不知道如何在 Iphone 5 中为视图设置边距，仅当我在视图中使用顶部边距时，它看起来在其他 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 >

【参考方案1】：

你可以试试这样写。

<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>