Avec l'introduction des feuilles de page dans iOS 13, il y a un fond blanc dans mon application que je ne peux pas sembler pouvoir changer (derrière la feuille de page blanche et le haut gris de la page sous-jacente):
De toute évidence, pour la plupart des applications, une couleur de fond noir serait bien meilleure.
Alors que pour les applications React Native éjectées, on peut utiliser:
https://github.com/johniak/react-native-root-view-background
Je suis curieux de savoir si quelqu'un utilisant l'Expo géré a trouvé un moyen de gérer cela. Comme je ne trouve pas beaucoup de plaintes sur ce problème, à part:
3 Réponses :
Je suppose que vous utilisez createNativeStackNavigator -navigation 5.x avec createNativeStackNavigator puis que vous utilisez la presentation:"modal" dans vos options d'écran. Je n'ai pas pu trouver un moyen de définir un fond noir sur la vue racine avec ce type de navigateur.
Voici ce que j'ai fini par faire:
createStackNavigator , avec mode='modal' propriété mode='modal' ....TransitionPresets.ModalPresentationIOS dans mes options d'écran. Cela imite le comportement que vous recherchez, car createStackNavigator respecte la propriété backgroundColor définie dans votre fichier app.json pour sa vue racine. J'ai trouvé cette solution après avoir trouvé ce Snack ( https://snack.expo.io/@satya164/modal-presentation-style-in-react-navigation ). C'est loin d'être parfait mais c'est le mieux que je puisse faire pour le moment en utilisant l'Expo géré. Avec les navigateurs imbriqués, je continue d'utiliser createNativeStackNavigator pour les navigateurs push afin d'obtenir de jolies transitions push natives pour autre chose que les modaux.
Pour tous ceux qui utilisent @react-navigation et recherchent un moyen de changer la couleur d'arrière-plan de la vue racine entre les changements d'onglet: ajoutez simplement le prop backgroundColor à app.json :
"backgroundColor": "#000000",
Peut également fonctionner dans d'autres scénarios.
There is an simple trick using navigator...
<NavigationContainer>
<Stack.Navigator
screenOptions={{
cardStyle: {
backgroundColor: 'Your_Color_Here'
}
}}
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>
</NavigationContainer >
You can use cardStyle to change default white backgroundColor to your desire backgroundColor. I hope this answer helps use it works for me.