React-Native 状态栏设置

import React,{ Component } from 'react';
import {
Platform,
StyleSheet,
View,
StatusBar
} from 'react-native';
import ETTHeaderStyles from '../res/styles/ETTHeaderStyles';
export class ETTLightStatus extends Component {
render() {
return (

<StatusBar
animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor,barStyle和hidden
hidden={false} //是否隐藏状态栏。
networkActivityIndicatorVisible ={false}//仅作用于ios。是否显示正在使用网络。
showHideTransition={'fade'}//仅作用于ios。显示或隐藏状态栏时所使用的动画效果（’fade’,‘slide’）。
backgroundColor={ETTHeaderStyles.headerStyle} //状态栏的背景色
translucent={false}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
barStyle={'light-content'} // enum('default','light-content','dark-content')
>
</StatusBar>


);
}
}


export class ETTDarkStatus extends Component {
render() {
return (
<StatusBar
animated={true} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor,barStyle和hidden
hidden={false} //是否隐藏状态栏。
backgroundColor={'white'} //状态栏的背景色
translucent={false}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
barStyle={'dark-content'} // enum('default','dark-content')
networkActivityIndicatorVisible ={false}//仅作用于ios。是否显示正在使用网络。
showHideTransition={'fade'}
>
</StatusBar>

);
}

}

使用处：

render() {
    return(
        <View style={rootStyles.container}>
            <ETTLightStatus/>
            <Text style={rootStyles.textPromptStyle}>
                入口文件:

            </Text>
            <Button style={rootStyles.bigTextPrompt} onPress={() => this.userConfirmed()}  title={'to detail'}>

            </Button>

        </View>
    );

}