這篇文章會介紹一些關於 StatusBar 的特性和使用方式。

Statusbar 的特性

• barStyle default 在 iOS 預設為 dark-content，在 Android 預設為 light-content。
  • light-content
    
  • dark-content
    
• iOS 狀態欄預設為透明，但 android 不是。
  • 若在 Android 要讓狀態欄呈現透明，需要設置 translucent={true} 之外，背景色也要設為透明 backgroundColor="transparent"
  • 如果是使用 expo 的話可以在 app.json 中用 androidStatusBar 屬性設置。
  • iOS透明:

    <StatusBar barStyle="dark-content" />
    

    
  • Android透明:

    <StatusBar
        barStyle="dark-content"
        translucent={true}
        backgroundColor="transparent"
    />
    

    
• Statusbar.currentHeight 可以獲取 status bar 的高度，僅限 Android 使用，iOS 拿到的會是 undefined。
• networkActivityIndicatorVisible={true}: 僅限 iOS 使用的屬性，可以在狀態欄左上方顯示加載動畫（一些需要告知加載狀態的時候很有用）
  

基本用法

• 暗色主題狀態欄內容為白色; 亮色主題狀態欄內容則為黑色
• iOS & Android 狀態欄底色皆為透明

import React from 'react'
import { StatusBar, useColorScheme } from 'react-native'

import { Colors } from 'react-native/Libraries/NewAppScreen'

export const App = (): JSX.Element => {
  const isDarkMode = useColorScheme() === 'dark'

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  }

  return (
    <>
      <StatusBar
        translucent={true}
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor="transparent"
      />
      //...
    </>
  )
}

SafeAreaView

• 用於避開瀏海、導航欄、工具欄只在可視範圍內渲染畫面。
• RN 內建的 SafeAreaView 僅支持 iOS (iOS 11 以上版本)

使用 SafeAreaView：

不使用 SafeAreaView：

import React from 'react'
import { StyleSheet, Text, SafeAreaView } from 'react-native'

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <Text>Page content</Text>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
})

export default App

Android 內容跟 Statusbar 重疊

因為 Android 沒辦法使用 SafeAreaView，所以內容會和 Statusbar 重疊到：

對於這種情況，可以將 marginTop 設置為狀態欄的高度來避免組件渲染到狀態欄的位置。

import { StatusBar } from 'react-native'

const App = () => {
    return (
        <>
            <StatusBar
                barStyle="dark-content"
                translucent={true}
                backgroundColor="transparent"
            />
            <View style={{ marginTop: StatusBar.currentHeight ?? 0 }}>
                // ...
            </View>
        </>
    )
}

或者可以使用 react-native-safe-area-context 這個第三方庫提供的 SafeAreaView，支持 iOS 及 Android

參考資料

• Statusbar - React Native