2015-09-23 16 views

Antwort

4

Ich habe ein npm Paket macht die StatusBar in android

https://www.npmjs.com/package/react-native-android-statusbar

Die Farbänderungen zu steuern tun nicht reflektieren für Versionen vor 21

+0

Danke für das Modul! Ich werde dies als die Antwort markieren, da es der "React" Weg zu sein scheint. – russjr08

+0

Was ist mit der Färbung der Navigationsleiste? – user1532043

+0

Ich glaube nicht, Android hat eine API dafür freigegeben –

2

Es gibt keine exponierte API für jetzt. Dies funktioniert nur von Android 5.0. Arbeiten an einem Brückenmodul, um dasselbe zu erreichen. Halten Sie auf dem Laufenden

+0

ich würde schätzen, dank einem Haufen. – russjr08

4

Es gibt derzeit keine Möglichkeit, das von JS zu tun. Sie können es anpassen, indem Sie ein benutzerdefiniertes Design verwenden. Schauen Sie sich android/src/main/res/values/styles.xml Datei aus Ihrem Projekt (Vorlage ist hier: https://github.com/facebook/react-native/blob/master/local-cli/generator-android/templates/src/app/src/main/res/values/styles.xml) und lesen Sie mehr hier: https://developer.android.com/training/material/theme.html

+0

Wow, ich habe total vergessen, dass es unter den React Native-Sachen ein echtes Java-Projekt gibt. Obwohl ich denke, dass ich einen Wert-21-Ordner verwenden muss, da das colorPrimary/colorPrimaryDark-Zeug nur auf Lollipop und höher verfügbar ist. Oder bringen Sie AppCompat ... – russjr08

16

Sie können React Native Status Bar (detaillierte Beschreibung) verwenden. Alles, was Sie tun müssen, ist das Wrappen des Navigators mit einer Ansicht und das Hinzufügen einer StatusBar-Komponente darüber. Vergessen Sie nicht, die Statusleiste aus dem 'reaktionsnativen' Paket zu importieren.

<View> 
    <StatusBar 
    backgroundColor="blue" 
    barStyle="light-content" 
    /> 
    <Navigator 
    initialRoute={{statusBarHidden: true}} 
    renderScene={(route, navigator) => 
     <View> 
     <StatusBar hidden={route.statusBarHidden} /> 
     ... 
     </View> 
    } 
    /> 
</View> 

Eine Sache, die ich bemerkt habe ist, dass Sie die übergeordnete Ansicht mit flex Stil sollte: 1, ohne es Sie nur einen weißen leeren Bildschirm sehen. Es wird jedoch nicht in RN-Dokumenten erwähnt.

+0

Das funktioniert für mich. Vielen Dank! – drikoda

+0

Dies funktioniert und Bearbeiten von styles.xml in Android-Projekt wird nicht funktionieren. Vielen Dank. – Qing

+0

Der Navigator ist jetzt veraltet. Also auf der Suche nach einer besseren Lösung. –

0

diesen Code hinzufügen auf dem Header-Komponente

androidStatusBarColor="#34495e" 
Verwandte Themen