React Native 奇幻之旅(9)-狀態欄(Statusbar)

10 個月前

內容目錄 隱藏

1 Statusbar 的特性

2 基本用法

3 SafeAreaView

4 Android 內容跟 Statusbar 重疊

5 參考資料

5.1 相關文章

這是我在2023第十五屆 iThome 鐵人賽發表的系列文章。https://ithelp.ithome.com.tw/users/20136637/ironman/6408

這篇文章會介紹一些關於 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