如何在 React Native 中设置 iOS 状态栏背景颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39297291/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set iOS status bar background color in React Native?
提问by Ed of the Mountain
Is there a single place in the react native iOS native code that I could modify to set iOS statusbar backgroundColor? RCTRootView.m ?
在 React Native iOS 本机代码中是否有一个地方可以修改以设置 iOS 状态栏 backgroundColor？RCTRootView.m ?
The react native StatusBarcomponentonly support backgroundColorfor Android only.
该反应原生状态栏组件只支持的backgroundColor为仅适用于Android。
The iOS operating system seems to allow setting status bar backgroundColor
在iOS操作系统似乎允许设置状态栏的backgroundColor
My goal is to have a darker status bar color.
我的目标是使状态栏颜色更深。
回答by jmurzy
iOS doesn't have a concept of a status bar bg. Here's how you'd achieve this in a cross-platform way:
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);
回答by dv3
Add import { StatusBar } from 'react-native';to the top of your app.jsand then add StatusBar.setBarStyle('light-content', true);as the first line in your render()to change the status bar text/icons to white.
添加import { StatusBar } from 'react-native';到您的顶部，app.js然后添加StatusBar.setBarStyle('light-content', true);为您的第一行render()以将状态栏文本/图标更改为白色。
The other color options are 'default'and 'dark-content'.
其他颜色选项是'default'和'dark-content'。
Refer to https://facebook.github.io/react-native/docs/statusbar.htmlfor further info.
有关更多信息，请参阅https://facebook.github.io/react-native/docs/statusbar.html。
Other than that: no, you would have to follow the link you provided.
除此之外：不，您必须按照您提供的链接进行操作。
回答by Luis Antonio Pestana
If you are using react-native-navigation, you need to:
如果您使用的是 react-native-navigation，则需要：
1-) Add this to your info.plist file:
1-) 将此添加到您的 info.plist 文件中：
<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>
2-) At first line of your render()function, eg:
2-) 在render()函数的第一行，例如：
render(){
this.props.navigator.setStyle({
statusBarTextColorScheme: 'light'
});
return (
<Login navigator={this.props.navigator}></Login>
);
}
This example will transform your status bar to light text/buttons/icons color.
此示例将您的状态栏转换为浅色文本/按钮/图标颜色。
回答by Talha Javed
set iOS & Android statusbar backgroundColor in react-native
在 react-native 中设置 iOS 和 Android 状态栏背景颜色
import React, { Component } from 'react';
import { Platform, StyleSheet, View, StatusBar } from 'react-native';
import Constants from 'expo-constants';
class Statusbar extends Component {
render() {
return (
<View style={styles.StatusBar}>
<StatusBar translucent barStyle="light-content" />
</View>
);
}
}
const styles = StyleSheet.create({
StatusBar: {
height: Constants.statusBarHeight,
backgroundColor: 'rgba(22,7,92,1)'
}
});
export default Statusbar;
回答by Keshav Gera
render() {
let { email, password, isLoading } = this.state
return (
<View style={{ flex: 1, }}>
<StatusBar
translucent
barStyle="light-content"
// backgroundColor="rgba(0, 0, 0, 0.251)"
backgroundColor='magenta'
/>
</View>
)
}
