notification - ¿Cómo configurar el color de fondo de la barra de estado de iOS en React Native?

status bar translucent react native

Question

¿Hay un solo lugar en el código nativo nativo de iOS que pueda modificar para establecer el color de fondo de la barra de estado de iOS? RCTRootView.m?

El componente reaccionar StatusBar nativo solo admite backgroundColor solo para Android.

El sistema operativo iOS parece permitir la configuración de fondo de la barra de estado .

Mi objetivo es tener un color de barra de estado más oscuro.

Answer 1

Agregue import { StatusBar } from ''react-native''; en la parte superior de tu app.js y luego agrega StatusBar.setBarStyle(''light-content'', true); como la primera línea en su render() para cambiar el texto / íconos de la barra de estado a blanco.

Las otras opciones de color son ''default'' y ''dark-content'' .

Consulte https://facebook.github.io/react-native/docs/statusbar.html para obtener más información.

Aparte de eso: no, tendría que seguir el enlace que proporcionó.

Answer 2

Si está utilizando react-native-navigation, necesita:

1-) Agregue esto a su archivo info.plist:

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

2-) En la primera línea de su función render() , por ejemplo:

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

Este ejemplo transformará su barra de estado a texto claro / botones / color de iconos.

Answer 3

iOS no tiene el concepto de una barra de estado bg. Así es como lo lograrías de una manera multiplataforma:

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