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