React Native：如何更改状态栏图标颜色

Question

我似乎无法找到一种方法将状态栏图标的颜色更改为白色 - 位于屏幕顶部，例如时间和时间。电池。

我已尝试在info.plist中添加以下内容

• 状态栏样式：UIStatusBarStyleLightContent
• 查看基于控制器的状态栏外观：否

但似乎只适用于以前版本的IOS。任何帮助非常感谢。

Answer 1

您需要在React Native组件中使用StatusBarIOS：

StatusBarIOS.setStyle('light-content')

文档：http://facebook.github.io/react-native/docs/statusbarios.html#content

编辑：自RN 0.22 起，StatusBarIOS已被弃用，应使用跨平台StatusBar。如上所述，它仍然被迫使用：

StatusBar.setBarStyle('light-content', true);

但是，推荐使用此组件的推荐方法。例如：

 <View>
   <StatusBar
     backgroundColor="blue"
     barStyle="light-content"
   />
   <Navigator
     initialRoute={{statusBarHidden: true}}
     renderScene={(route, navigator) =>
       <View>
         <StatusBar hidden={route.statusBarHidden} />
         ...
       </View>
     }
   />
 </View>

请在此处查看新文档：http://facebook.github.io/react-native/docs/statusbar.html

Answer 2

我遇到了同样的问题。追踪文档（https://reactnative.dev/docs/statusbar#barstyle）并没有帮助。

因此，我只是在StatusBar组件上进行了Opt+Click的操作，以查找可以更改的道具及其提供的方法。

我发现的道具片段：

export declare type StatusBarStyle = 'auto' | 'inverted' | 'light' | 'dark';
export declare type StatusBarAnimation = 'none' | 'fade' | 'slide';
export declare type StatusBarProps = {
    /**
     * Sets the color of the status bar text. Default value is "auto" which
     * picks the appropriate value according to the active color scheme, eg:
     * if your app is dark mode, the style will be "light".
     */
    style?: StatusBarStyle;

我使用了此信息并像下面这样更新了StatusBar组件：

<StatusBar style="light" />

瞧，我将图标和文本更改为wshite！