网站建设网/搜索引擎优化是什么意思啊
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}}><StatusBaranimated={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>);}
}
github下载地址