• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

ios - Iphone 5 状态栏被 React Native 覆盖

[复制链接]
菜鸟教程小白 发表于 2022-12-11 20:42:47 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

我的代码在大多数 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-推荐答案


你可以试试这样写。

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

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注0

粉丝2

帖子830918

发布主题
阅读排行 更多
广告位

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap