ReactNative: Use the Status Bar StatusBar

I. Introduction

May be used in the control UIStatusBar iOS App changed status bar, in the same manner, React-Native StatusBar can be used to control components.

 

二, API

Attributes:

// whether to hide 
hidden? : Boolean,

// whether to support animation 
Animated? : Boolean,

// set the background color, limit the use of Android 
backgroundColor? : $ FlowFixMe,

// Are Transparent 
Translucent? : Boolean,

// status bar style default, white, black 
barStyle ?: ' default ' | ' Light-Content ' | ' Dark-Content ' ,

// whether to display the network indicator iOS only use 
networkActivityIndicatorVisible? : Boolean,

// set the hidden animations 
showHideTransition ?: ' Fade ' | ' Slide ' , 

method:

// static methods to hide the status bar 
static setHidden (hidden: boolean, Animation? : StatusBarAnimation)

// static method, set the status bar style 
static SetBarStyle (style: StatusBarStyle, Animated? : Boolean)

// static method, set up the network indicator, iOS only use 
static setNetworkActivityIndicatorVisible (visible: boolean)

// static method, set the background color, Andrews only use 
static setBackgroundColor (Color: String , Animated? : Boolean)

// static methods, set transparency 
static setTranslucent (Translucent: boolean)

 

Third, the use

Use settings

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    StatusBar,
    TouchableHighlight
} from 'react-native';


export default class ReactNativeDemo extends Component {

    constructor(props){
        super(props);
        this.state = {
            show: true
        }
    }

    // initialize the status bar 
    componentWillMount () {

        // white mode 'default': the default mode | 'light-content': white mode | 'dark-content': Default black mode, 
        StatusBar.setBarStyle ( " Light-Content " , to true );

        // display the network indicator 
        StatusBar.setNetworkActivityIndicatorVisible ( to true );

        // hide the animation mode 'Fade': | 'Slide': 
        StatusBar.showHideTransition = ' Slide ' ;
    }

    showHideStatusBar() {
        this.setState({show:!this.state.show});
        StatusBar.setHidden(this.state.show, true);
    }

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <TouchableHighlight onPress={this.showHideStatusBar.bind(this)}>
                    <Text> Click to show or hide the status bar </ Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: '#1FB9FF'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

Using property settings

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    View,
    StatusBar,
} from 'react-native';


export default class ReactNativeDemo extends Component {

    render() {
        return (
            <View style={[styles.flex,styles.bgColor,styles.center]}>
                <StatusBar animated={true}
                           hidden={false}
                           backgroundColor={'blue'}
                           translucent={true}
                           barStyle={'light-content'}
                           showHideTransition={'fade'}
                           networkActivityIndicatorVisible={true}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1
    },
    bgColor: {
      backgroundColor: '#1FB9FF'
    },
    center: {
        alignItems: 'center',
        justifyContent: 'center'
    }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);