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

React Native logo

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

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

Statusbar 的特性

  • barStyle default 在 iOS 預設為 dark-content,在 Android 預設為 light-content。
    • light-content
      Q4BqR0A
    • dark-content
      C3d05qz
  • iOS 狀態欄預設為透明,但 android 不是。
    • 若在 Android 要讓狀態欄呈現透明,需要設置 translucent={true} 之外,背景色也要設為透明 backgroundColor="transparent"
    • 如果是使用 expo 的話可以在 app.json 中用 androidStatusBar 屬性設置。
    • iOS透明: <StatusBar barStyle="dark-content" /> GIfzoSR
    • Android透明: <StatusBar barStyle="dark-content" translucent={true} backgroundColor="transparent" />
      3T2YzjY
  • Statusbar.currentHeight 可以獲取 status bar 的高度,僅限 Android 使用,iOS 拿到的會是 undefined
  • networkActivityIndicatorVisible={true}: 僅限 iOS 使用的屬性,可以在狀態欄左上方顯示加載動畫(一些需要告知加載狀態的時候很有用)
    ydmzI7A

基本用法

  • 暗色主題狀態欄內容為白色; 亮色主題狀態欄內容則為黑色
  • 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:

8KMkRga

不使用 SafeAreaView:

FJbOyRO
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 重疊到:

pdY0rw1

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

QlKRvmN
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

參考資料

留言

目前沒有留言。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *