React Native - 狀態欄組件（StatusBar）的使用詳解

一、StatusBar組件介紹

• StatusBar 是手機頂部的狀態條。
• StatusBar 是 React Native 0.20 起新增的跨平台組件，它可以用來設置並動態改變設備的狀態欄顯示特性。
• React-Native項目可以同時加載多個 StatusBar 組件，這些 StatusBar 組件的屬性可以按照加載的順序進行合並。一種常見的用法就是：我們可以在使用 Navigator 的時候，針對不同的路由頁面設置特殊的狀態欄樣式。
  雖然 StatusBar 是跨平台組件，但其中有些屬性是通用的，而有些則是 iOS 或 Android 獨有的。所以我們開發時要做好適配。

二、屬性總述

2.1 API

有些場景並不適合使用組件，因此StatusBar也暴露了一個靜態API。然而不推薦大家同時通過靜態API和組件來定義相同的屬性，因為靜態API定義的屬性值在后續的渲染中會被組件中定義的值所覆蓋。

2.2 常量

currentHeight (僅限Android)狀態欄的當前高度。

2.3 查看Props

animated
barStyle
hidden
backgroundColor
translucent
networkActivityIndicatorVisible
showHideTransition

2.4查看方法

setHidden
setBarStyle
setNetworkActivityIndicatorVisible
setBackgroundColor
setTranslucent

查看類型定義

StatusBarStyle
StatusBarAnimation

三、通用屬性介紹

1.animated

（1）設置當狀態欄的狀態發生變化時，是否需要加入動畫。
（2）動畫支持 backgroundColor、barStyle 和 hidden 屬性的變化。

2.hidden

設置狀態欄是否隱藏。下面左圖為狀態欄默認樣式，右圖為將狀態欄隱藏。

 

下面是具體代碼:

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

//默認應用的容器組件
class App extends Component {
    //渲染
    render() {
        return (
            <View style={styles.container}>
              <StatusBar hidden={true} />
            </View>
        );
    }
}

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

AppRegistry.registerComponent('LoveYouDeeply', () => App);

3.barStyle

用於設置狀態欄文字的顏色，其值是枚舉類型enum(‘default’, ‘light-content’, ‘dark-content’):
default：黑色文字（默認）
light-content：白色文字
dark-content: 暗色文字
下面代碼我們將狀態欄的文字顏色改成白色。

<StatusBar barStyle={'light-content'} />

顯示效果如下圖所示,其中左邊是barStyle="dark-content"在ios中的顯示效果,右邊是在android中的顯示效果(同時在這里可以看時,backgroundColor屬性只針對android有效):

四、僅支持iOS的屬性

1.networkActivityIndicatorVisible

設定網絡活動指示器(就是那個正在加載中圖標)是否顯示在狀態欄。

<StatusBar networkActivityIndicatorVisible={true} />

如下圖所示,在左邊圖片中顯示第三項就是該效果

2. showHideTransition

通過 hidden 屬性來顯示或隱藏狀態欄時所使用的動畫效果，有兩種選擇：fade（默認值）、slide

五、僅支持Android的屬性

1.backgroundColor

Android 設備上狀態欄的背景顏色

<StatusBar backgroundColor={'blue'} />

2.translucent

設置狀態欄是否為透明。
當狀態欄的值為 true 的時候，應用將會在狀態欄下面進行繪制顯示。這樣在 Android 平台上面就是沉浸式的效果，可以達到 Android 和 iOS 應用顯示效果的一致性。
該值常常同配置半透明效果的狀態欄顏色一起使用。

<StatusBar translucent={true} />

3.StatusBar.currentHeight常量

React Native 在 Android 平台為 StatusBar 組件提供了一個靜態常量 currentHeight，我們可以通過讀取這個常量來得到 Android 手機狀態欄的高度。
注意：currentHeight 不是一個屬性，我們直接訪問 StatusBar.currentHeight 就可以了。

六、StatusBar中方法的使用

1.setHidden()

控制顯示／隱藏狀態欄,能夠傳遞動畫方式

static setHidden(hidden: boolean, [animation]: StatusBarAnimation)

2.setBarStyle()

通過方式設置狀態欄的樣式

static setBarStyle(style: StatusBarStyle, [animated]: boolean)

參數：
StatusBarStyle是要設置的狀態欄樣式,animated屬性決定是否啟用過渡動畫

3.setNetworkActivityIndicatorVisible()

顯示／隱藏網絡活動指示器

static setNetworkActivityIndicatorVisible(visible: boolean)

參數：
visible是否顯示網絡活動指示器

4.setBackgroundColor()

設置狀態欄的背景色(僅限於android系統)

static setBackgroundColor(color: string, [animated]: boolean)

參數：
color需要設置的背景色,animated是否啟用過渡動畫

5.setTranslucent()

指定狀態欄是否透明。設置為true時，應用會在狀態欄之下繪制（即所謂“沉浸式”——被狀態欄遮住一部分）。常和帶有半透明背景色的狀態欄搭配使用。(僅適用android系統)

static setTranslucent(translucent: boolean)

參數：
translucent 指定是否透明狀態

七、不同平台下狀態欄的處理

在使用的時候,可以在項目開始的地方也就是容器組件出進行設置,在使用Modal的地方可能需要根據Modal的背景色重新設置狀態欄的顏色,針對不同的系統有以下建議

1.Android 手機狀態欄

（1）當狀態欄呈現在 Andorid 手機屏幕頂部時，它會占用頂部這個空間，我們只能使用剩下的屏幕空間。也就是說如果從第 0 行開始放置組件時，組件會緊貼着狀態欄的下邊沿顯示。
（2）要想知道實際可用的屏幕高度，可以通過手機屏幕的高度減去狀態欄高度得到。

2.iOS 手機狀態欄

（1）在 iOS 平台上，取得的屏幕高度就是實際可使用的高度。
（2）如果從第 0 行開始排列組件時，組件會緊貼着手機屏幕的最上沿顯示。如果狀態欄沒有被隱藏，它將覆蓋在第 0 行組件的上方。
（3）如果不想設置狀態欄隱藏，則應當空出狀態欄的顯示區域。但可以為這個區域設置背景色，以使整個界面風格統一。