ReactNative: 使用StatusBar狀態欄

一、簡介

在iOS中可以使用UIStatusBar控件改變App的狀態欄，同樣地，React-Native中可以使用StatusBar組件來控制。

 

二、API

屬性：

//是否隱藏
hidden?: boolean,

//是否支持動畫
animated?: boolean,

//設置背景色, 限安卓使用
backgroundColor?: $FlowFixMe,

//是否透明
translucent?: boolean,

//狀態欄樣式  默認、白色、黑色
barStyle?: 'default' | 'light-content' | 'dark-content',

//是否顯示網絡指示器 僅限iOS使用
networkActivityIndicatorVisible?: boolean,

//設置隱藏的動畫
showHideTransition?: 'fade' | 'slide', 

方法：

//靜態方法，隱藏狀態欄
static setHidden(hidden: boolean, animation?: StatusBarAnimation)

//靜態方法，設置狀態欄樣式
static setBarStyle(style: StatusBarStyle, animated?: boolean)

//靜態方法，設置網絡指示器，僅限iOS使用
static setNetworkActivityIndicatorVisible(visible: boolean)

//靜態方法，設置背景色，僅限安卓使用
static setBackgroundColor(color: string, animated?: boolean)

//靜態方法，設置透明度
static setTranslucent(translucent: boolean)

 

三、使用

使用方法設置

/**
 * 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
        }
    }

    //初始化狀態欄
    componentWillMount() {

        //白色模式  'default': 默認模式  | 'light-content'：白色模式 | 'dark-content'：默認黑色模式 ,
        StatusBar.setBarStyle("light-content", true);

        //顯示網絡指示器
        StatusBar.setNetworkActivityIndicatorVisible(true);

        //隱藏的動畫模式  '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>點擊顯示或者隱藏狀態欄</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

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

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

使用屬性設置

/**
 * 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);