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

Question

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

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

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

并且有效

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

这里发生了什么：

1. （导航，路线）的数组作为参数传递给MyScreen2；
2. {route}是用于从[1]破坏数组的语法；
3. 然后您可以使用问题中的表达式访问topic。