React Native에서 iOS 상태 표시 줄 배경색을 설정하는 방법은 무엇입니까?

React Native에서 iOS 상태 표시 줄 배경색을 설정하는 방법은 무엇입니까?

---

iOS 상태 표시 줄 backgroundColor를 설정하기 위해 수정할 수있는 React 네이티브 iOS 네이티브 코드에 단일 위치가 있습니까? RCTRootView.m?

는 기본 반응 상태 바의 구성 요소 에만 지원 의 backgroundColor를 전용 안드로이드.

아이폰 OS 운영 체제는 상태 표시 줄의 설정을 허가하는 것 같다 의 backgroundColor를

내 목표는 더 어두운 상태 표시 줄 색상을 사용하는 것입니다.

---

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);

---

추가 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 을 참조하십시오 .

그 외에 : 아니요, 제공 한 링크를 따라야합니다.

---

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>
    );
  }

이 예제는 상태 표시 줄을 밝은 텍스트 / 버튼 / 아이콘 색상으로 변환합니다.

참조 URL : https://stackoverflow.com/questions/39297291/how-to-set-ios-status-bar-background-color-in-react-native