StatusBar控件的简介

Posted 2023-04-06

参考技术A

一个StatusBar控件通过了一个窗口，通常都在应用程序的底部，应用程序可以在其中显示各种状态数据。一个StatusBar控件最多可以分成16个Panel对象，都保存在一个Panels集合中。
一个StatusBar控件由Panel对象组成，每个Panel对象都可以包含文本和/或图片。控制每个Panel对象外观的属性有Width, Alignment和Bevel。并且，可以使用Style属性的7个值之一自动显示普通的数据，如日期、时间和键盘状态。
在设计时，可以创建和自定义Panel对象的外观，在StatusBar控件的Properties Page中，选择Panel卡片就可以设置各种参数了。在运行时，可以根据应用程序的状态对Panel对象重新配置以反映不同的功能。有关Panel对象的属性、事件和方法的信息，请参阅Panel对象和Panels集合。
一个StatusBar控件通常显示在窗体上所查看对象的信息、对象的组成或与对象操作有关的内容信息。StatusBar控件与其他控件如ToolBar控件一起，可以使你创建经济而又富含信息的用户界面。

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