web-dev-qa-db-fra.com

Marge supérieure pour la barre d'en-tête dans React Navigation native

Je suis nouveau dans React Native. J'utilise React-Navigation. Mais, sur mon appareil, il y a un problème avec la navigation des en-têtes. Cette superposition par barre d'état comme celle-ci.

enter image description here

Ce problème se produit à la fois sur mon code et à partir de React Exemple de vitrine de navigation. Comment le résoudre? Merci

javascriptreact-nativereact-navigation
11
Pham Minh Tan

Vous utilisez Expo, ce comportement est donc normal.

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: 24 },
}

Vous pouvez définir votre en-tête comme ceci.

Modifier environ un an plus tard:

Avec Expo, vous pouvez désormais utiliser ceci:

import { Constants } from 'expo'

static navigationOptions = {
  title: "Welcome",
  headerStyle: { marginTop: Constants.statusBarHeight },
}
5
Poptocrack

Si vous utilisez expo, essayez de définir les options de navigation comme ceci

navigationOptions:{
  headerStyle:{
    marginTop: (Platform.OS === 'ios') ? 0 : Expo.Constants.statusBarHeight }
  }
}

Avec cela, le rembourrage ne prendra effet que dans Android. Pour plus d'informations, vous pouvez visiter lien.

2
Darren Lau

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
  }
}
2
Hinrich

Si vous utilisez Expo, vous pouvez utiliser Platform à partir de expo core alors :

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

après cela, créez une feuille de style:

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

Avec Expo, vous pouvez utiliser des constantes:

import Constants from 'expo-constants';

const styles = StyleSheet.create({
  container: {
    marginTop: Constants.statusBarHeight
  },
});

Vous pouvez également utiliser le composant Barre d'état de React Native:

import { StatusBar } from 'react-native';

const styles = StyleSheet.create({
  container: {
    marginTop: StatusBar.currentHeight
  },
});
0
pjehan