React-Navigation 5 - 在屏幕之间传递值答案

【问题标题】：React-Navigation 5 - Passing values between screensReact-Navigation 5 - 在屏幕之间传递值
【发布时间】：2020-02-12 06:05:02
【问题描述】：

我习惯于在 Navigation 4 中使用 getParam 在屏幕之间传递值，现在我在版本 5 中有点迷失了。我制作了一个 Expo Snack 以更好地理解我遇到的问题：https://snack.expo.io/@mobshed/navigation-5---passing-values

如果零食不清楚，我想将主题的值从Screen1传递到Screen2。

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

问题是因为路由参数未嵌入花括号中。我试过用这个

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  AsyncStorage,
  Dimensions,
  FlatList,
  TouchableOpacity,
  ScrollView,
  Alert,
  RefreshControl,
  Animated,
  Easing,
  Image,
  Button
} from "react-native";
import MyScreen1 from "./App.js";
import { createStackNavigator } from "@react-navigation/stack";
const Stack = createStackNavigator();

function MyScreen2({route}) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Text>itemId: {route.params?.topic ?? "defaultValue"}</Text>
    </View>
  );
}

export default MyScreen2;

成功了

【讨论】：

非常感谢，Saurav！

【解决方案2】：

@Saurav 的答案是正确的。不过，我想补充一下。我可能建议将 MyScreen2 重写为：

export default MyScreen2 = ({route}) => {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Text>itemId: {route.params?.topic ?? "defaultValue"}</Text>
    </View>
  );
}

这里发生了什么：

{navigation:{}, route:{…}} 的“地图”作为参数传递给 MyScreen2；
{route} 是从 [1] 解构地图的语法；
然后您可以使用问题中的表达式访问主题。

所以如果你以后需要在MyScreen2上添加一些导航逻辑，你也可以解构navigation。

【讨论】：