如何在React Native中设置iOS状态栏背景颜色？

在反应本机iOS本机代码中是否有一个地方，我可以修改以设置iOS状态栏backgroundColor？ RCTRootView.m？

反应本地StatusBar组件仅支持Android的backgroundColor 。

iOS操作系统似乎允许设置状态栏backgroundColor

我的目标是有一个黑暗的状态栏颜色。

Answer 1

iOS没有状态栏bg的概念。 以下是您如何以跨平台的方式实现这一点：

import React, { Component, } from 'react'; import { AppRegistry, StyleSheet, View, StatusBar, Platform, } from 'react-native'; const MyStatusBar = ({backgroundColor, ...props}) => ( <View style={[styles.statusBar, { backgroundColor }]}> <StatusBar translucent backgroundColor={backgroundColor} {...props} /> </View> ); class DarkTheme extends Component { render() { return ( <View style={styles.container}> <MyStatusBar backgroundColor="#5E8D48" barStyle="light-content" /> <View style={styles.appBar} /> <View style={styles.content} /> </View> ); } } const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight; const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56; const styles = StyleSheet.create({ container: { flex: 1, }, statusBar: { height: STATUSBAR_HEIGHT, }, appBar: { backgroundColor:'#79B45D', height: APPBAR_HEIGHT, }, content: { flex: 1, backgroundColor: '#33373B', }, }); AppRegistry.registerComponent('App', () => DarkTheme); 

Answer 2

import { StatusBar } from 'react-native';添加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 3

如果您正在使用react-native-navigation，则需要：

1-）添加到你的info.plist文件中： <key>UIViewControllerBasedStatusBarAppearance</key> <string>YES</string>

2） render()函数的第一行，例如： render(){ this.props.navigator.setStyle({ statusBarTextColorScheme: 'light' }); return ( <Login navigator={this.props.navigator}></Login> ); } render(){ this.props.navigator.setStyle({ statusBarTextColorScheme: 'light' }); return ( <Login navigator={this.props.navigator}></Login> ); }

这个例子将把你的状态栏变成浅色文本/button/图标的颜色。