美文网首页
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