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

Question

我的路由器设置如下

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

Answer 1

您的问题是您的 MapStack 和地图屏幕都具有相同的名称，'Map'。

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

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

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

Answer 2

@sfratini 是对的

问题确实是 "Map" 密钥出现在两个地方。

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

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

因此，您的问题的解决方案是按照@sfratini 的建议将 "Map" 键重命名为其他名称。

Answer 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

Answer 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>
)
}

并且您必须将地图屏幕与主页放在一起，然后按如下方式搜索 Stack：

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

你的蛇的结果：

希望这会有所帮助。

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

Pass parameters between drawer stacks react-navigation

parameter-passing

navigation-drawer

react-native

react-navigation