美文网首页
ReactNative SafeAreaView修改IOS上下安

ReactNative SafeAreaView修改IOS上下安

作者: 我给你想的好名字 | 来源:发表于2021-01-29 08:43 被阅读0次

    Reactnative 使用SafeAreaView适配IOS iphonex 刘海屏 状态栏和底部背景色

    最新新开项目,用了最新的版本(0.61.2),用到SafeAreaView。

    然后发现一个问题根据设计稿要求状态栏颜色是需要显示主题色的。不bb 直接上图。。

    image

    还是直接上解决代码吧。。。
    [图片上传中...(image.png-c29cc1-1611880988014-0)]

    render() {
            return (
                <View style={{flex: 1}}>
                    //顶部背景色
                    <SafeAreaView style={{
                        backgroundColor: "#13BFA2",
                        flex: 0
                    }}>
    
                    </SafeAreaView>
                    //中间内容区域
                    <SafeAreaView
                        style={{
                            backgroundColor: "#13BFA2",
                            flex: 1,
                        }}>
    
                        <StatusBar barStyle="dark-content" backgroundColor="#13BFA2"/>
                        <MainScreenRouterOld ref={this.mainRouter}/>
                    </SafeAreaView>
                    //底部背景色
                    <SafeAreaView style={{
                        backgroundColor: "white",
                        flex: 0
                    }}>
                    </SafeAreaView>
                </View>
    
            );
        }
    

    相关文章

      网友评论

          本文标题:ReactNative SafeAreaView修改IOS上下安

          本文链接:https://www.haomeiwen.com/subject/draftltx.html