如何在React Native中设置iOS状态栏背景颜色？ [英] How to set iOS status bar background color in React Native?

问题描述

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

解决方案

iOS没有状态栏bg的概念。以下是以跨平台方式实现此目的的方法：

  import React，{
 Component，$ b来自'react'的$ b};来自'react-native'的
 import {
 AppRegistry，
 StyleSheet，
查看，
 StatusBar，
平台，
}; 
 
 const MyStatusBar =（{backgroundColor，... props}）=> （
<查看样式= {[styles.statusBar，{backgroundColor}]}> 
< StatusBar半透明backgroundColor = {backgroundColor} {... props} /> 
< ; / View> 
）; 
 
类DarkTheme扩展组件{
 render（）{
 return（
< View style = {styles.container}> 
< MyStatusBar backgroundColor =＃5E8D48barStyle =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（{
容器：{
 flex：1，
}，
 statusBar：{
 height： STATUSBAR_HEIGHT，
}，
 appBar：{
 backgroundColor：'＃79B45D'，
身高：APPBAR_HEIGHT，
}，
内容：{
 flex：1，
 backgroundColor：'＃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,
} 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);

这篇关于如何在React Native中设置iOS状态栏背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！