web-dev-qa-db-fra.com

Passer les paramètres entre les piles de tiroirs React-Navigation

La configuration de mon routeur est la suivante

import { createAppContainer, createDrawerNavigator, createStackNavigator, createSwitchNavigator } from "react-navigation";

import Home from "./components/Home";
import Search from "./components/Search";
import Map from "./components/Map";

import Login from "./components/Login";
import ForgotPassword from "./components/ForgotPassword";

import SideMenu from "./SideMenu";

const DashboardStack = createStackNavigator(
  {
    Home: { screen: Home },
    Search : {screen : Search}
  }
);

const MapStack = createStackNavigator(
  {
    Map: { screen: Map },
  }
);

const AuthStack = createStackNavigator(
  {
    Login: { screen: Login },
    ForgotPassword: { screen: ForgotPassword },
  }
);

export const DrawerStack = createDrawerNavigator(
  {
    Dashboard: { screen: DashboardStack },
    Map: { screen: MapStack },
  },
  {
    contentComponent: SideMenu,
    drawerWidth: 250
  }
);

export const AppNavigator = createStackNavigator(
  {
    Drawer: { screen: DrawerStack },
    Auth: { screen: AuthStack },
  },
  {
    // initialRouteName: "Drawer",
    headerMode: 'none',
    mode: 'modal',
  }
);

export default createAppContainer(DrawerStack);

Tout fonctionne bien, juste un petit problème. Lorsque je navigue vers l'écran de recherche depuis mon domicile, puis que je passe à l'écran Carte avec des paramètres, ces paramètres n'atteignent pas l'écran Carte.

Ma configuration actuelle est à codepan

react-nativeparameter-passingnavigation-drawerreact-navigation
9
Janak Nirmal

Votre problème est que votre MapStack et votre écran Carte ont tous les deux le même nom, "Carte".

Remplacez simplement la route MapStack par quelque chose d'autre comme "MapStack" et vous obtiendrez les paramètres.

Voir ici: https://snack.expo.io/SyTFUPZUB

export const DrawerStack = createDrawerNavigator(
  {
    Dashboard: { screen: DashboardStack },
    MapStack: { screen: MapStack },
  },
  {
    contentComponent: SideMenu,
    drawerWidth: 250
  }
);
4
sfratini

vous pouvez accéder aux paramètres de votre écran Carte comme suit:

mettre à jour ceci:

render() {
return (
  <SafeAreaView style={styles.container}>
    <Text>Map</Text>
  </SafeAreaView>
)
}

pour ça :

render() {
return (
  <SafeAreaView style={styles.container}>
    <Text>{this.props.navigation.state.params.name}</Text>
  </SafeAreaView>
)
}

et vous devez mettre votre écran Carte avec la maison et rechercher Stack comme suit:

import { createAppContainer, createDrawerNavigator, createStackNavigator, 
createSwitchNavigator } from "react-navigation";

import Home from "./components/Home";
import Search from "./components/Search";
import Map from "./components/Map";

import Login from "./components/Login";
import ForgotPassword from "./components/ForgotPassword";

import SideMenu from "./SideMenu";

const DashboardStack = createStackNavigator(
{
  Home: { screen: Home },
  Search : {screen : Search},
  Map: { screen: Map },
}
);


const AuthStack = createStackNavigator(
{
  Login: { screen: Login },
  ForgotPassword: { screen: ForgotPassword },
}
);

export const DrawerStack = createDrawerNavigator(
{
  Dashboard: { screen: DashboardStack },
},
{
  contentComponent: SideMenu,
  drawerWidth: 250
}
);

export const AppNavigator = createStackNavigator(
{
  Drawer: { screen: DrawerStack },
  Auth: { screen: AuthStack },
} ,
{
  // initialRouteName: "Drawer",
  headerMode: 'none',
  //mode: 'modal',
}
);

export default createAppContainer(DrawerStack);

le résultat de votre snak:

enter image description here

j'espère que cela vous aidera.

0
Maitham

@sfratini a raison

Le problème est en effet la clé "Map" étant présente à deux endroits.

Donc navigation.navigate ("Map") naviguera vers MapStack. Naviguer vers la pile signifie aller à l'écran actuel de cette pile, par défaut initialRouteName ou premier écran de la pile.

Pour vérifier cela, ajoutez un autre écran comme premier écran dans MapStack et vérifiez le comportement.

Ainsi, la solution à votre problème est de renommer la clé "Map" en quelque chose d'autre, comme suggéré par @sfratini.

0
ckedar

Cela fonctionne bien en ajoutant simplement un écran de carte à la pile de tableaux de bord

const DashboardStack = createStackNavigator(
  {
    Home: { screen: Home },
    Search : {screen : Search},
     Map: { screen: Map }
  }
);

puis utilisez

this.props.navigation.getParam('name', 'name is coming')

pour obtenir la valeur des paramètres de nom

voici le code https://snack.expo.io/HyEFZeyLB

0
Simple Abstraction