Juste un avertissement, je suis un concepteur UX qui apprend React Native pour créer un prototype.
J'essaie de comprendre comment modifier l'onglet actif lorsqu'un utilisateur appuie sur un bouton dans une vue d'un autre onglet.
Par exemple, si vous êtes sur la vue d'accueil et qu'il y a un bouton sur lequel un utilisateur clique et qui l'amène à la vue des paramètres, je voudrais que l'onglet des paramètres s'affiche comme l'onglet inférieur actif lorsque la vue s'affiche.
Je peux actuellement demander à l'application d'accéder au nouveau afficher, mais il affichera toujours l'onglet Accueil comme l'onglet actif. De plus, il ne devrait pas y avoir de bouton «Retour» dans l'en-tête lorsque vous accédez à l'un des écrans accessibles via la navigation par onglet du bas. J'ai parcouru la documentation de React Navigation 3.x mais je n'ai rien trouvé pour résoudre ce cas d'utilisation.
Voici le code que j'utilise actuellement.
<TouchableOpacity
onPress={() => {
this.props.navigation.push("Settings");
}}
>{...}
</TouchableOpacity>
3 Réponses :
Lorsque vous créez le navigateur de l'onglet inférieur, assurez-vous que votre écran de paramètres fait partie de cet onglet.
De plus, au lieu de push , envisagez de naviguer car c'est ce que la documentation recommande de faire maintenant à partir de la version 3 et plus récente.
Réf: https://reactnavigation.org/docs /en/tab-based-navigation.html
const TabNavigator = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
Oui, je me suis assuré que tous mes écrans sont définis dans le code createBottomTabNavigator.
Eh bien, vous devez d'abord décider si vous voulez des onglets en bas ou en haut de votre application Android. J'ai opté pour le bas, et je n'ai que des icônes, pas de texte (je l'ai fait parce que les icônes avec du texte sur React Navigation sur les foules Android sont horribles, mais elles ont l'air bien sur l'iPhone). Voici un exemple de code pour vous:
import React from 'react';
import { TabNavigator } from 'react-navigation';
import { MaterialIcons, Ionicons } from '@expo/vector-icons';
import { Platform } from 'react-native';
// Import Screens
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';
export const Tabs = TabNavigator({
Screen1: {
screen: Screen1,
navigationOptions: {
tabBarLabel: 'Screen1',
tabBarIcon: ({ tintColor }) => <MaterialIcons name='account-circle' size={26} style={{ color: tintColor }} />
},
},
Screen2: {
screen: Screen2,
navigationOptions: {
tabBarLabel: 'Screen2',
tabBarIcon: ({ tintColor }) => <Ionicons name='ios-time' size={26} style={{ color: tintColor }} />
},
},
}, {
headerMode: 'none', // I don't want a NavBar at top
tabBarPosition: 'bottom', // So your Android tabs go bottom
tabBarOptions: {
activeTintColor: 'red', // Color of tab when pressed
inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
showIcon: 'true', // Shows an icon for both iOS and Android
showLabel: (Platform.OS !== 'android'), //No label for Android
labelStyle: {
fontSize: 11,
},
style: {
backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
height: (Platform.OS === 'ios') ? 48 : 50 // I didn't use this in my app, so the numbers may be off.
}
},
});
Vous utilisez la fonction push . Ce qui pousse une autre vue dans la pile de navigation. Vous pouvez utiliser replace ici pour ne pas ajouter une autre vue dans la pile. Consultez également la navigation par onglets dans la documentation.
https://reactnavigation.org/docs/en/tab -navigator.html
https: / /reactnavigation.org/docs/en/bottom-tab-navigator.html
Merci, je ne connaissais pas l'option permettant d'utiliser "remplacer", mais même en échangeant "naviguer" contre "remplacer", cela ne résout toujours pas le problème de forcer un onglet dans le navigateur d'onglets à être actif lors de la navigation depuis une action "onPress". J'utilise le createBottomTabNavigator cependant.
Cela semble fonctionner correctement
<TouchableOpacity
onPress={() => {
this.props.navigation.navigate("Settings");
}}
>{...}
</TouchableOpacity>