NativeBase + Exponent Header

Question

Ich verwende NativeBase mit Exponent. Die Kopfzeile wird unter der Statusleiste des Telefons angezeigt. Sie können dies in der NativeBase-Demo sehen, die Exponent veröffentlicht hat.

Hat jemand eine Lösung für dieses?

Answer 1

landete ich einen MarginTop mit dem Wert des Status des Geräts Aufsummierung.

import { 
    StatusBar, 
} from 'react-native' 

In meinem globalen Sheet:

header: { 
    marginTop: StatusBar.currentHeight, 
} 

Answer 2

ich einen besseren Weg, dies mit dem StyleProvider mit meinem Thema zu behandeln gefunden und dann in de Komponenten Ordner (native-base-Thema/Komponenten) gefunden die Header.js-Datei und den paddintTop Wert ändern (um 305-Linie)

Answer 3

Da diese Frage kommt nur in Android, die empfohlene Methode, dieses Problem zu beheben wäre Android zu zielen speziell Platform:

import {Platform, StatusBar} from 'react-native' 

const styles = StyleSheet.create({ 
    container: { 
      flex: 1, 
      ...Platform.select({ 
       android: { 
        marginTop: StatusBar.currentHeight 
       } 
      }) 

     } 
}) 

Wo Container der Hauptcontainer in der App ist.

<View style={{styles.container}}> 
// rest of the code here 
</View>