android - Color StatusBar en React Native

react navigation status bar color

Question

¿Cómo puedo cambiar el color de fondo del componente StatusBar de react-native , sin editar archivos específicos de Android?

Docs dice que puedo usar backgroundColor propiedad backgroundColor . Pero falla. barStyle métodos estáticos barStyle property, setBarStyle && setBackgroundColor funcionan correctamente.

Solo la propiedad hidden funciona.

Estoy usando create-react-native-app , construido con Expo .

Answer 1

En la aplicación Expo, necesita editar app.json en el directorio raíz de su proyecto de la siguiente manera:

{
    "expo": {
        "sdkVersion": "16.0.0",
        "androidStatusBar": {
            "barStyle": "dark-content",
            "backgroundColor": "#0A48A5"
        }
    }
}

Consulte la documentación de la Expo: https://docs.expo.io/versions/v16.0.0/guides/configuration.html

Answer 2

Puedes usar

<StatusBar
 backgroundColor="blue"
 barStyle="light-content"
/>

Puedes ver la documentación aquí .

Answer 3

utilizar esta

import {StatusBar} from ''react-native'';


const bar = ()=>{
  return( <StatusBar
          backgroundColor="insert your color here"/>
 );
};