web-dev-qa-db-ja.com

React NativeでiOSステータスバーの背景色を設定する方法

IOSステータスバーbackgroundColorを設定するために変更できる、iOSのネイティブネイティブコードに反応する単一の場所はありますか？ RCTRootView.m？

react nativeStatusBarコンポーネント サポートのみbackgroundColorAndroidのみ。

iOSオペレーティングシステムはステータスバーの設定を許可しているようですbackgroundColor

私の目標は、ステータスバーの色をより濃くすることです。 Example

iosreact-nativeios7-statusbar
54
Ed of the Mountain

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

simulator

145
jmurzy

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 を参照してください。

それ以外：いいえ、提供したリンクをたどる必要があります。

36
dv3

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

この例では、ステータスバーを明るいテキスト/ボタン/アイコンの色に変換します。 enter image description here

2
Luis Antonio Pestana