在抽屉堆栈之间传递参数 react-navigation答案

【问题标题】：Pass parameters between drawer stacks react-navigation在抽屉堆栈之间传递参数 react-navigation
【发布时间】：2019-08-28 11:47:19
【问题描述】：

我的路由器设置如下

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);

一切正常，只是一个小问题。当我从主页导航到搜索屏幕然后切换到带有参数的地图屏幕时，这些参数没有到达地图屏幕。

我目前的设置是codepan

【问题讨论】：

查看您将“名称：'Janak'”传递给 Map 的代码，是您没有找到的值吗？或者你能通过吗？
是的，我无法在该地图中获得该值，这是我找不到的一些愚蠢的错误，通常如果它们在同一个堆栈中，我们可以得到，但在这里我们有不同的堆栈所以不确定。
难道只是你必须在名称周围加上“”吗？喜欢this.props.navigation.navigate('Map', { "name": 'Janak' });
我根据您的建议更改了它并删除了“”但不起作用
我说要加，不要删，至少看codepen

标签： react-native parameter-passing navigation-drawer react-navigation

【解决方案1】：

您的问题是您的 MapStack 和您的地图屏幕都具有相同的名称“地图”。

只需将 MapStack 路由替换为“MapStack”之类的其他内容，您将获得参数。

请看这里：https://snack.expo.io/SyTFUPZUB

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

【讨论】：

那一定没问题，因为 react-navigation 仅通过屏幕名称而不是直接识别组件。
@GokulKulkarni 我很确定发生的事情是 RN 将请求发送到堆栈而不是屏幕，然后堆栈没有将参数转发到屏幕。如果您尝试这种小吃，您会发现它很有效。
流程是这样的，请求当然首先与参数一起发送到堆栈，然后发送到屏幕，如果有多个屏幕，它将发送到指定的第一个或者如果 initialRoute 是然后与参数一起指定给该组件。如果您使用的任何东西都有效，那么它就是 react-navigation 中的一个错误
@GokulKulkarni 很公平，但它有效。我要说的是堆栈和堆栈中的屏幕的 ID 相同。可能是堆栈只是加载第一个屏幕而不是传递参数。

【解决方案2】：

@sfratini 是对的

问题确实是“地图”键出现在两个地方。

因此 navigation.navigate("Map") 将导航到 MapStack。导航到堆栈意味着转到该堆栈的当前屏幕，默认为 initialRouteName 或堆栈中的第一个屏幕。

要验证这一点，请在 MapStack 中添加另一个屏幕作为第一个屏幕并检查行为。

因此，您的问题的解决方案是将“Map”键重命名为其他名称，正如 @sfratini 所建议的那样。

【讨论】：

【解决方案3】：

只需将地图屏幕添加到仪表板堆栈即可正常工作

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

然后使用

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

获取名称参数值

这里是代码 https://snack.expo.io/HyEFZeyLB

【讨论】：

【解决方案4】：

您可以在地图屏幕中访问参数，如下所示：

更新这个：

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

到这里：

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

你必须把你的地图屏幕放在家里，然后像下面这样搜索堆栈：

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);

你的蛇的结果：

希望这会有所帮助。

【讨论】：