ReactNative: 使用StatusBar状态栏

Posted 2021-03-19 xyq-208910

一、简介

在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);