react native StatusBar 使用详解

最新推荐文章于 2024-07-04 17:34:33 发布

老孟Flutter

最新推荐文章于 2024-07-04 17:34:33 发布

阅读量1.7w

点赞数

分类专栏： react native 学习之旅文章标签： rn StatusBar

本文链接：https://blog.csdn.net/mengks1987/article/details/71127885

版权

react native 学习之旅专栏收录该内容

44 篇文章 8 订阅

订阅专栏

StatusBar 是手机顶部的状态条。
属性：

animated：状态栏变化时是否使用动画。
hidden：是否隐藏状态栏。
backgroundColor：仅作用于android。状态栏背景色。
translucent：仅作用于android。是否透明。
barStyle：状态栏文本的颜色（’default’, ‘light-content’, ‘dark-content’）。
networkActivityIndicatorVisible：仅作用于ios。是否显示正在使用网络。
showHideTransition：仅作用于ios。显示或隐藏状态栏时所使用的动画效果（’fade’, ‘slide’）。

Demo：

/**
 * Created by on 2017/4/27.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    StatusBar,
    Text,
    Button,
    TouchableHighlight,
} from 'react-native';

function getValue<T>(values: Array<T>, index: number): T {
    return values[index % values.length];
}


export default class StatusBarDemo extends Component {

    static navigationOptions = {
        title: 'StatusBar',
        header: {
            //style:{backgroundColor: 'black',},
        }
    };

    state = {
        animated: true,
        hidden: false,
        backgroundColor:'white',
        translucent:false,
        barStyle:'default',
        networkActivityIndicatorVisible:false,
        showHideTransition:'fade',
    }


    render() {
        return (
            <View style={{flex:1}}>
                <StatusBar
                    animated={this.state.animated}
                    hidden={this.state.hidden}
                    backgroundColor={this.state.backgroundColor}
                    translucent={this.state.translucent}
                    barStyle={this.state.barStyle}
                    networkActivityIndicatorVisible={this.state.networkActivityIndicatorVisible}
                    showHideTransition={this.state.showHideTransition}
                />
                <Button title={this.state.animated?'禁用动画':'使用动画'} onPress={()=>{this.setState({animated:!this.state.animated})}}/>
                <Button title={this.state.hidden?'显示':'隐藏'} onPress={()=>{this.setState({hidden:!this.state.hidden})}}/>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Text>设置背景色：</Text>
                    <Button title='红色' onPress={()=>{this.setState({backgroundColor:'red'})}}/>
                    <Button title='蓝色' onPress={()=>{this.setState({backgroundColor:'blue'})}}/>
                    <Button title='半透明' onPress={()=>{this.setState({backgroundColor:'#80000000'})}}/>
                </View>
                <Button title={this.state.translucent?'不透明':'透明'} onPress={()=>{this.setState({translucent:!this.state.translucent})}}/>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Text>设置样式：</Text>
                    <Button title='default' onPress={()=>{this.setState({barStyle:'default'})}}/>
                    <Button title='light-content' onPress={()=>{this.setState({barStyle:'light-content'})}}/>
                    <Button title='dark-content' onPress={()=>{this.setState({barStyle:'dark-content'})}}/>
                </View>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                    <Text>显示或隐藏动画效果：</Text>
                    <Button title='fade' onPress={()=>{this.setState({showHideTransition:'fade'})}}/>
                    <Button title='slide' onPress={()=>{this.setState({showHideTransition:'slide'})}}/>
                </View>
            </View>
        );
    }
}