React Native 其他组件之 StatusBar

控制应用状态栏的组件。

属性

1. 通用属性

名称	类型	说明
animated	bool	指定状态栏的变化是否应以动画形式呈现。
barStyle	enum('default', 'light-content', 'dark-content')	设置状态栏文本的颜色。
hidden	bool	是否隐藏状态栏。

2. 仅支持 iOS 的属性

名称	类型	说明
networkActivityIndicatorVisible	bool	指定是否显示网络活动提示符。
showHideTransition	enum('fade', 'slide')	通过hidden属性来显示或隐藏状态栏时所使用的动画效果。

3. 仅支持 Android 的属性

名称	类型	说明
backgroundColor	color	状态栏的背景色。
translucent	bool	指定状态栏是否透明。

方法

• setHidden()
  显示／隐藏状态栏

• setBarStyle()
  设置状态栏的样式

• setNetworkActivityIndicatorVisible()
  显示／隐藏网络活动指示器

• setBackgroundColor()
  设置状态栏的背景色

• setTranslucent()
  指定状态栏是否透明。

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  StatusBar
} from 'react-native';

export default class App extends Component { 
  
  render() {
    return (
      <View style={styles.container}>
        <StatusBar
          hidden={true}
        />
        </View>
    )
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
    backgroundColor: '#1FB9FF'
  },
  
});

2. 效果图

false.jpg true.jpg