如何在 React Native 中设置 iOS 状态栏背景颜色? [英] How to set iOS status bar background color in React Native?
本文介绍了如何在 React Native 中设置 iOS 状态栏背景颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在 React Native iOS 本机代码中是否有一个地方可以修改以设置 iOS 状态栏背景颜色?RCTRootView.m ?
解决方案
iOS 没有状态栏 bg 的概念.以下是您如何以跨平台方式实现这一目标:
import React, {成分,来自'反应';进口 {应用注册,样式表,看法,状态栏,平台,安全区域视图来自'反应原生';const MyStatusBar = ({backgroundColor, ...props}) =>(<视图样式={[styles.statusBar, { backgroundColor }]}><SafeAreaView><StatusBar 半透明 backgroundColor={backgroundColor} {...props}/></SafeAreaView></查看>);类 DarkTheme 扩展组件 {使成为() {返回 (<查看样式={styles.container}><MyStatusBar backgroundColor="#5E8D48";barStyle =光含量";/><视图样式={styles.appBar}/><视图样式={styles.content}/></查看>);}}const STATUSBAR_HEIGHT = StatusBar.currentHeight;const APPBAR_HEIGHT = Platform.OS === 'ios' ?44:56;const 样式 = StyleSheet.create({容器: {弹性:1,},状态栏: {高度:STATUSBAR_HEIGHT,},应用栏:{背景颜色:'#79B45D',高度:APPBAR_HEIGHT,},内容: {弹性:1,背景颜色:'#33373B',},});AppRegistry.registerComponent('App', () => DarkTheme);
Is there a single place in the react native iOS native code that I could modify to set iOS statusbar backgroundColor? RCTRootView.m ?
The react native StatusBar component only support backgroundColor for Android only.
The iOS operating system seems to allow setting status bar backgroundColor
My goal is to have a darker status bar color.
解决方案
iOS doesn't have a concept of a status bar bg. Here's how you'd achieve this in a cross-platform way:
import React, {
Component,
} from 'react';
import {
AppRegistry,
StyleSheet,
View,
StatusBar,
Platform,
SafeAreaView
} from 'react-native';
const MyStatusBar = ({backgroundColor, ...props}) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<SafeAreaView>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</SafeAreaView>
</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 = 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);
这篇关于如何在 React Native 中设置 iOS 状态栏背景颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文