Comment mettre iOS barre d'état la couleur de fond dans Réagissent Natif?

Question

Est-il un seul endroit dans le réagir iOS native native code que je pourrais modifier pour définir iOS barre d'état backgroundColor? RCTRootView.m ?

La réagir natif de la Barre d'état du composant uniquement de support backgroundColor pour Android.

Le système d'exploitation iOS semble permettent le paramétrage de la barre d'état backgroundColor

Mon but est d'avoir un plus sombre barre d'état la couleur.

Answer 1

iOS n'est pas un concept d'une barre d'état bg. Voici comment vous pouvez atteindre cet objectif en une croix-plate-forme de manière à:

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

Answer 2

Ajouter import { StatusBar } from 'react-native'; vers le haut de votre app.js , puis ajouter StatusBar.setBarStyle('light-content', true); sur la première ligne de votre render() pour changer le statut de texte de la barre d'icônes/blanc.

Les autres options de couleur sont 'default' et 'dark-content'.

Reportez-vous à https://facebook.github.io/react-native/docs/statusbar.html pour plus d'infos.

Autre que cela: non, vous devez suivre le lien que vous avez fourni.

Answer 3

Si vous êtes à l'aide de réagir-natif de navigation, vous devez:

1-) l'Ajouter à vos infos.fichier plist: <key>UIViewControllerBasedStatusBarAppearance</key> <string>YES</string>

2-) À la première ligne de votre render() de la fonction, par exemple: render(){ this.props.navigator.setStyle({ statusBarTextColorScheme: 'light' }); return ( <Login navigator={this.props.navigator}></Login> ); }

Cet exemple va transformer votre barre d'état à la lumière de texte/boutons/icônes de couleur.