rn 顶部状态栏组件

状态栏组件
<StatusBar />
	
	属性:
	backgroundColor='设置状态栏背景颜色'
	barStyle="dark-content/light-content"; 设置文字是否高亮显示
	hidden:{布尔值};  是否显示状态栏

代码示例:

import React,{Component} from 'react'
import {View,Text,StatusBar,StyleSheet,TouchableOpacity} from 'react-native'

export default class App extends Component{
    state={
        hidden:false,
        barStyle:'default'
    }
    show=()=>{
        var hidden=!this.state.hidden;
        this.setState({
            hidden:hidden
        })
    }

    changeStyle=()=>{
        var barStyle=this.state.barStyle=='light-content'?'dark-content':'light-content'
        this.setState({
            barStyle:barStyle
        })
    }

    render(){
        return(
            <>
                <View>
                    <StatusBar backgroundColor='red' barStyle={this.state.barStyle} hidden={this.state.hidden} />
                    <TouchableOpacity style={style.button} onPress={this.show}>
                        <Text>开关</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={style.button} onPress={this.changeStyle}>
                        <Text>改变主题颜色</Text>
                    </TouchableOpacity>
                </View>
            </>
        )
    }
}

const style=StyleSheet.create({
    button:{
        backgroundColor:'#4ba37b',
        width:100,
        borderRadius:50,
        alignItems:"center",
        marginTop:100


    }
})