J'apprends le développement de l'application dans React Native et mon application se chevauche avec la barre d'état de mon téléphone. Si j'ajoute un rembourrage au sommet, le rembourrage différerait pour différents téléphones. J'ai essayé d'utiliser SafeAreAeView mais cela ne fonctionne pas et j'ai lu quelque part que cela ne fonctionne que pour iPhones. Alors, est-ce que je peux rendre l'application sous la barre d'état? Toute suggestion serait appréciée.
4 Réponses :
Vous devrez trouver la hauteur de la barre d'état et définir la marge supérieure de votre conteneur pour être égal à ce montant.
Etant donné que Expo fournit cette valeur sous forme de constante, vous pouvez l'utiliser pour définir le style de votre composant parent tel que le contenu est toujours sous la barre d'état. P>
Vous pouvez suivre ce motif du Github Numéro ici P>
const App = StackNavigator({
Home: { screen: HomeScreen },
About: { screen: AboutScreen },
}, {
navigationOptions: { headerStyle: { marginTop: Expo.Constants.statusBarHeight } }
})
Merci pour votre réponse. J'utilise le flux de réacteur-native-routeur pour la navigation et j'ai essayé d'ajouter ce style dans le pavillon du scénario sur ma balise de routeur. Mais cela m'a donné une erreur 'TypeError: non défini n'est pas un objet (évaluant expo.Constants.statusbarheight)'
Vous devez installer et importer des constantes Expo docs.expo.io/versions/latest/sdk / Constantes
Pour ce problème, j'ai créé une enveloppe de composant réutilisable pour mon écran utilise les deux SafeAreAVoir code> et Voir code>. Exemple de code. render() {
<Screen>
<Text>{'your screen content here'}</Text>
</Screen>
};
Hey, merci pour votre réponse. J'ai essayé cette méthode, mais cela me donne simplement une violation invariante. Le type d'élément est invalide: attendu une chaîne ou une classe mais a été non définie ». J'utilise React-Native-Router-Flux pour la navigation.
Je l'ai finalement résolu en ajoutant simplement paddingtop: StatusBar.Curryheight à la balise de vue racine de mon composant.
Vous devez utiliser Statusbar code> comme ceci: <StatusBar />
Vous pouvez vous référer à ce numéro Github.com/expo/expo/issues/1314# Issuecomment-361775086 , espérons que cela aide
Pouvez-vous fournir le code que vous utilisez pour définir la vue et la navigation?
Reportez-vous à Évitez les chevauchements de barre d'état sur tous les écrans
Pouvez-vous me montrer le code d'écran et le code de désignation de routeur où est le problème?
J'ai le même problème, cependant, lorsque je construis un APK, l'instance d'application de l'APK n'inclut pas la barre d'état