React Native元件學習 StatusBar(ES6)

weixin_33935777發表於2018-04-22
React Native元件

iOS做開發的時候，大部分應用都需要我們做頂部狀態列的設定。那麼React Native如何做設定呢？

一、StatusBar元件介紹

StatusBar 是 React Native 0.20 起新增的跨平臺元件，它可以用來設定並動態改變裝置的狀態列顯示特性。

StatusBar 元件可以同時載入多個 StatusBar 元件，這些 StatusBar 元件的屬性可以按照載入的順序進行合併。一種常見的用法就是：我們可以在使用 react-navigation 的時候，針對不同的路由頁面設定特殊的狀態列樣式。

雖然 StatusBar 是跨平臺元件，但其中有些屬性是通用的，而有些則是 iOS 或 Android 獨有的。所以我們開發時要做好適配。

二、通用屬性介紹

1，animated

（1）設定當狀態列的狀態發生變化時，是否需要加入動畫。

（2）動畫支援 backgroundColor、barStyle 和 hidden 屬性的變化。

2，hidden

設定狀態列是否隱藏。下面左圖為狀態列預設樣式，右圖為將狀態列隱藏。

原文:React Native - 狀態列元件（StatusBar）的使用詳解 原文:React Native - 狀態列元件（StatusBar）的使用詳解

 import React, {Component} from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

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'

},

});

三、僅支援iOS的屬性

1，barStyle

用於設定狀態列文字的顏色，其值是列舉型別:

default：黑色文字（預設）

light-content：白色文字

下面程式碼我們將狀態列的文字顏色改成白色。

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

7097765-90116e959ff06f93.png
image.png

2，networkActivityIndicatorVisible

設定網路活動指示器(就是那個菊花)是否顯示在狀態列。

原文:React Native - 狀態列元件（StatusBar）的使用詳解

<StatusBar networkActivityIndicatorVisible={true} />

[圖片上傳失敗...(image-33903f-1524400932258)]

3，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 就可以了。

五、不同平臺下狀態列的處理

1，Android 手機狀態列

（1）當狀態列呈現在 Andorid 手機螢幕頂部時，它會佔用頂部這個空間，我們只能使用剩下的螢幕空間。也就是說如果從第 0 行開始放置元件時，元件會緊貼著狀態列的下邊沿顯示。

（2）要想知道實際可用的螢幕高度，可以通過手機螢幕的高度減去狀態列高度得到。

2，iOS 手機狀態列

（1）在 iOS 平臺上，取得的螢幕高度就是實際可使用的高度。

（2）如果從第 0 行開始排列元件時，元件會緊貼著手機螢幕的最上沿顯示。如果狀態列沒有被隱藏，它將覆蓋在第 0 行元件的上方。

（3）如果不想設定狀態列隱藏，則應當空出狀態列的顯示區域。但可以為這個區域設定背景色，以使整個介面風格統一。

參考：http://www.hangge.com/blog/cache/detail_1613.html

相關文章