La marge du Haut pour la Barre d'en-Tête Réagir Natif de Navigation

Je suis nouveau dans Réagissent Natif. Je suis l'aide de Réagir de la Navigation. Mais, sur mon appareil a un problème avec l'en-tête de navigation. Cette superposition par la barre d'état comme ça.

Ce problème se produit à la fois sur mon code et de Réagir de Navigation vitrine exemple. Comment résoudre ce problème? Grâce

Double Possible de Réagir Natif Expo StackNavigator chevauche barre de Notification
Merci @MichaelCheng. Il est dupliqué

InformationsquelleAutor Pham Minh Tan | 2017-07-18

8

Vous êtes à l'aide de l'Expo, donc ce comportement est normal.
```
static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: 24 },
}
```
Vous pouvez définir votre en-tête de ce genre.

Edit environ un an plus tard:

Avec l'Expo, vous pouvez maintenant utiliser cette:
```
import { Constants } from 'expo'

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: Constants.statusBarHeight },
}
```
- Cela ne fonctionne pas aussi bien sur iOS. a Accepté de répondre à la double fonctionne mieux sur les deux plates-formes à savoir marginTop: StatusBar.currentHeight
- Selon le Réagir Natif site currentHeight (Android only) The height of the status bar. Si cette solution ne semble pas fonctionner sur iOS.
- RN change si vite, mais quand j'ai fait ce commentaire, j'ai été le développement d'une Expo application sur un iPhone 4 et Android Nexus 5 et a obtenu une meilleure expérience avec le dupliquer comme l'a dit. Mais c'est un tout qui coule de la technologie, nous travaillons pour le meilleur ou pour le pire.
InformationsquelleAutor Poptocrack

Cela devrait faire ce que vous voulez.

import {
  StyleSheet,
  View,
  Platform
} from 'react-native';
import { Constants } from 'expo';

const App = () => (
    <View style={styles.container}>
        //Your content with margin for statusBar goes here
    </View>
)

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === 'ios' ? 0 : Constants.statusBarHeight
  }
}

InformationsquelleAutor Hinrich

3

J'ai trouvé ce utile lors de l'exécution dans la même problème
```
export default StackNavigator({
    LoginScreen: { screen: Login.component }
}, {
    initialRouteName: 'LoginScreen',
    headerMode: 'none' <------------- This
})
```
Juste ajouter headerMode: "none" dans l'objet de configuration

Espère que cette aide

Par la voie de Crédit va à Ce Lien
- Donner à cet homme une bière 🙂
InformationsquelleAutor Ahmad Khoja
2

Si vous utilisez de l'expo, essayez de régler les options de navigation comme ce
```
navigationOptions:{
  headerStyle:{
    marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight }
  }
}
```
Avec ce que le rembourrage ne prennent effet à la plate-forme android.
Pour plus d'informations, vous pouvez visiter lien.

InformationsquelleAutor Darren Lau

Si vous utilisez de l'Expo,vous pouvez utiliser Platform de expo core donc :

import { Constants } from "expo";
import { Platform } from "expo-core"; //inside of Platfrom from 'react-native'

après que créer une feuille de style:

const styles = StyleSheet.create({
  container: {
   marginTop: Platform.OS === "ios" ? 0 : Constants.statusBarHeight
   }
});

InformationsquelleAutor MBehtemam

Vous devez vous connecter pour publier un commentaire.