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

这里发生了什么

{导航：{}，路线：{…}} 的“地图”作为参数传递给MyScreen2；
{route} 是一种用于从[1]破坏地图的语法；
然后您可以使用问题中的表达式访问 topic 。

因此，如果将来需要在 MyScreen2 上添加一些导航逻辑，则也可以破坏导航。

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

2 个答案: