我可以修改 React Native iOS native 代码以设置 iOS 状态栏背景色吗? RCTRootView.m ?
react native StatusBar component仅支持 Android 的 backgroundColor。
iOS operating system seems to allow setting status bar backgroundColor
最佳答案
iOS 没有状态栏背景的概念。以下是您如何以跨平台方式实现这一目标:
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);
也许代码中并不清楚,但诀窍是使用适用于 Android 的 StatusBar
,并创建一个“假”状态栏(一个 View
backgroundColor
) 用于 IOS。
关于ios - 如何在 React Native 中设置 iOS 状态栏背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39297291/