React Native 不通过导航参数传递数据答案

【问题标题】：React Native not passing data through navigation paramReact Native 不通过导航参数传递数据
【发布时间】：2020-03-10 15:05:55
【问题描述】：

我在导航到另一个屏幕时尝试传递一些数据，但它不起作用。它导航到屏幕，但数据未定义。

我在“产品”屏幕上有这个按钮：

onPress={() => {
  props.navigation.navigate("Login", {
    test: "This is just a test"
  });
}}

登录屏幕：

const LoginScreen = props => {    
  const test = props.navigation.getParam("test");
  console.log(test);

测试未定义。

我的导航器（我从这个 sn-p 中删除了导入和其他内容）：

const MainNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Produto: ProdutoScreen,
  },
  {
    initialRouteName: "Home"
  }
);

const LoginNavigator = createStackNavigator(
  {
    Login: LoginScreen
  }
);

const DrawerNavigator = createDrawerNavigator(
  {
    Main: {
      screen: MainNavigator
    },
    Login: {
      screen: LoginNavigator
    }
  }
);

const SwitchNavigator = createSwitchNavigator({
  Start: StartScreen,
  Home: DrawerNavigator
});

【问题讨论】：

你用过react-router吗？它可能会使这项任务更容易。我不熟悉 SwitchNavigator。不确定 props 是如何传递的

标签： javascript react-native react-navigation

【解决方案1】：

只需更新您尝试访问参数的行。像这样，

const LoginScreen = props => {    
  const test = props.navigation.state.params.test;
  console.log(test);
}

【讨论】：

undefined 不是对象（评估 '_this.props.navigation'）
没有'this'：未定义不是一个对象（评估'props.navigation.state.params.test'）

【解决方案2】：

就这样做

const MainNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Produto: ProdutoScreen,
    Login: LoginScreen,     //this will resolve your issue
  },
  {
    initialRouteName: "Home"
  }
);

【讨论】：