web-dev-qa-db-ja.com

ドロワースタック間でパラメーターを渡す反応ナビゲーション

私のルーターのセットアップは以下の通りです

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 にあります

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

あなたの問題は、あなたのMapStackとあなたのMap画面の両方が同じ名前「Map」を持っていることです。

MapStackルートを「MapStack」のような別のものに置き換えるだけで、パラメーターを取得できます。

ここを参照してください： https://snack.expo.io/SyTFUPZUB

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

次のように、マップ画面のパラメータにアクセスできます。

これを更新：

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

あなたのスナックの結果：

enter image description here

これがお役に立てば幸いです。

0
Maitham

@sfratiniは正しい

問題は、実際には「マップ」キーが2箇所に存在することです。

したがって、navigation.navigate（ "Map"）はMapStackにナビゲートします。スタックに移動するとは、そのスタックの現在の画面に移動することを意味します。デフォルトでは、initialRouteNameまたはスタックの最初の画面になります。

これを確認するには、別の画面をMapStackの最初の画面として追加し、動作を確認します。

したがって、問題の解決策は、@ sfratiniで提案されているように、「マップ」キーを別の名前に変更することです。

0
ckedar

ダッシュボードスタックにマップ画面を追加するだけで正常に動作します

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

0
Simple Abstraction