我目前正在使用 Expo 和 React Navigation 在我的應用程式的深色主題和淺色主題之間切換。唯一的問題是我無法根據主題更改 iOS 上的狀態欄顏色。
我有一個 Tab Navigator 嵌套在 Drawer Navigator 中，但是當我為嵌套導航中的所有螢屏切換主題時，我無法弄清楚如何更改 iOS 上的狀態欄顏色。這就是我的抽屜導航器的一部分。
<themeContext.Provider value={themeData}>
<NavigationContainer theme={theme == 'Light' ? CustomDefaultTheme : CustomDarkTheme}>
<Drawer.Navigator
screenOptions={{
headerShown: false,
swipeEdgeWidth: 0,
drawerActiveBackgroundColor: '#e8e4f0',
drawerActiveTintColor: '#8a76b6',
drawerInactiveBackgroundColor: 'transparent',
drawerInactiveTintColor: '#bcbcc1',
}}
uj5u.com熱心網友回復：
您需要使用StatusBarfrom react-native。我個人把它旁邊Navigator的（不管你把它命名為）App.tsx/ App.jsx。像下面的例子：
<>
<StatusBar
backgroundColor={
theme == "Light"
? CustomDefaultTheme
: CustomDarkTheme
}
barStyle={
theme == "Light"
? CustomDefaultTheme
: CustomDarkTheme
}
/>
<Navigation />
</>
您可以根據需要調整barStyle和backgroundColor。
有關StatusBar道具的更多詳細資訊，請查看此處
uj5u.com熱心網友回復：
您可以使用 react-native 的 StatusBar 方法來更改它的背景或 barStyle -
StatusBar.setBarStyle(theme == 'Light' ? 'dark-content' : 'light-content');
StatusBar.setBackgroundColor(theme == 'Light' ? '#fff' : '#000')
當你改變主題時呼叫上面的函式。
如果您想更改所有螢屏的狀態欄背景，您可以從根組件更改它的另一種方法，那么您可以這樣做 -
import { SafeAreaView, StatusBar } from 'react-native'
...
<SafeAreaView style={{flex: 1}}>
<StatusBar
backgroundColor={theme == 'Light' ? '#fff' : '#000'}
barStyle={theme == 'Light' ? 'dark-content' : 'light-content'}
/>
<ThemeContext.Provider value={themeData}>
<NavigationContainer theme={theme == 'Light' ? CustomDefaultTheme : CustomDarkTheme}>
<Drawer.Navigator
screenOptions={{
...
}}>
...
</Drawer.Navigator>
</NavigationContainer>
</ThemeContext.Provider>
</SafeAreaView>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/363049.html