ios - React NativeでiOSステータスバーの背景色を設定するには?

Question

iOSステータスバーのbackgroundColorを設定するために変更できる、反応するネイティブiOSネイティブコードの1つの場所はありますか? RCTRootView.m?

反応ネイティブStatusBarコンポーネントは、Android のbackgroundColorのみをサポートします。

iOS オペレーティング システムでは、ステータス バーのbackgroundColorを設定できるようです

私の目標は、ステータス バーの色を暗くすることです。

Answer 1

import { StatusBar } from 'react-native';あなたの一番上に追加してから、あなたの最初の行としてapp.js追加して、ステータスバーのテキスト/アイコンを白に変更します。StatusBar.setBarStyle('light-content', true);render()

他の色のオプションは'default'と'dark-content'です。

詳細については、 https://facebook.github.io/react-native/docs/statusbar.htmlを参照してください。

それ以外: いいえ、提供したリンクをたどる必要があります。

Answer 2

ルート ビューに追加します。(ある場合は SafeAreaView の範囲外)

{Platform.OS === 'ios' &&
 <View style={{
     width: "100%",
     height: 100, // For all devices, even X, XS Max
     position: 'absolute',
     top: 0,
     left: 0,
     backgroundColor: "red"}}
/>}
// App screen
...

Answer 3

少し変更されたjmurzyのソリューションは、ノッチ付きの iOS を含む Android および iOS で動作するはずです。

import React from 'react'
import { SafeAreaView, StatusBar, View } from 'react-native'
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'

const App = () => {
    const isDarkMode = true
    return (
        <SafeAreaProvider>
            <CustomStatusBar
                barStyle={isDarkMode ? 'light-content' : 'dark-content'}
                backgroundColor={'red'}
            />
            <SafeAreaView style={{ flex: 1 }}>

                
            </SafeAreaView>
        </SafeAreaProvider>
    )
}

export default App

const CustomStatusBar = ({backgroundColor, ...props}) => {
    const { top } = useSafeAreaInsets()

    return (
        <View style={{ height: (StatusBar.currentHeight || top), backgroundColor }}>
            <SafeAreaView style={{ backgroundColor }}>
                <StatusBar translucent backgroundColor={backgroundColor} {...props} />
            </SafeAreaView>
        </View>
    )
}