我试图在我的react-native应用程序上更改statusBar的颜色。我正在使用expo,在他们的文档中,他们只是指定添加:"androidStatusBar": { "backgroundColor": "#2E1D59" }个这在Android上运行得很好,但他们没有提到如何在iOS StatusBar上这样做。有人有主意吗?
statusBar
expo
"androidStatusBar": { "backgroundColor": "#2E1D59" }
tkqqtvp11#
您无法更改iOS状态栏的颜色。您可以使用React Native StatusBar模块隐藏它,或将文本颜色设置为浅色(白色)或深色(黑色)。您可以直接将组件放到应用的根组件中:
<StatusBar barStyle="light-content" />
字符串
wpx232ag2#
您不能设置StatusBar本身的背景色,但是您的组件可以填充空间,您可以在组件上设置颜色。然后使用StatusBar组件告诉iOS更改文本颜色。
StatusBar
import { StatusBar } from 'expo-status-bar'; import React, { useEffect, useState } from 'react'; import { Appearance, View } from 'react-native'; export default function App() { const [colorScheme, setColorScheme] = useState(Appearance.getColorScheme()); useEffect(() => { const subscription = Appearance.addChangeListener(({ colorScheme }) => { setColorScheme(colorScheme); }); return () => { subscription.remove(); }; }, []); return ( <View style={{ flex: 1, backgroundColor: colorScheme === 'dark' ? 'black' : 'white' }}> <StatusBar style={colorScheme === 'dark' ? 'light' : 'dark'} /> {/* Your app content */} </View> ); }
2条答案
按热度按时间tkqqtvp11#
您无法更改iOS状态栏的颜色。
您可以使用React Native StatusBar模块隐藏它,或将文本颜色设置为浅色(白色)或深色(黑色)。
您可以直接将组件放到应用的根组件中:
字符串
wpx232ag2#
您不能设置
StatusBar
本身的背景色,但是您的组件可以填充空间,您可以在组件上设置颜色。然后使用StatusBar
组件告诉iOS更改文本颜色。字符串