Comment définir la couleur d'arrière-plan de la barre d'état iOS dans React Native?

Question

Existe-t-il un emplacement unique dans le code natif iOS natif réactif que je puisse modifier pour définir la barre d'état StatusColor iOS? RCTRootView.m?

Le composant natif StatusBar composant ne supporte que backgroundColor pour Android uniquement.

Le le système d'exploitation iOS semble autoriser le réglage de la barre d'état backgroundColor

Mon objectif est d'avoir une couleur de barre d'état plus sombre.

Answer 1

iOS n'a pas le concept d'une barre d'état bg. Voici comment vous y parviendrez de manière multiplateforme:

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

Ajoutez import { StatusBar } from 'react-native'; en haut de votre app.js, puis ajoutez StatusBar.setBarStyle('light-content', true); en tant que première ligne de votre render() pour modifier le texte/les icônes de la barre d'état en 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'informations.

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

Answer 3

Si vous utilisez react-native-navigation, vous devez:

1-) Ajoutez ceci à votre fichier info.plist:

<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>

2-) À la première ligne de votre fonction render(), par exemple:

  render(){
    this.props.navigator.setStyle({
      statusBarTextColorScheme: 'light'
    });
    return (
      <Login navigator={this.props.navigator}></Login>
    );
  }

Cet exemple transformera votre barre d'état en couleur claire pour le texte, les boutons et les icônes.