React-Navigation 5 - Передача значений между экранами

Question

Я использовал getParam в Navigation 4 для передачи значений между экранами, теперь я немного заблудился в версии 5. Я сделал Expo Snack, чтобы лучше понять мою проблему: https://snack.expo.io/@mobshed / navigation-5 --- передаваемые значения

В случае, если перекус не ясен, я бы хотел передать значение topi c с Screen1 на Screen2.

Answer 1

Ответ @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. "карта" {navigation: {}, route : {…}} передается MyScreen2 в качестве параметра;
2. {route} - это синтаксис для деструктурирования карты из [1];
3. Тогда Вы можете получить доступ к topi c, используя выражение из вопроса.

Так что если вам нужно добавить несколько навигационных логи c на MyScreen2 в в будущем вы можете также разрушить навигацию .

Answer 2

проблема в том, что параметр маршрута не заключен в фигурные скобки. Я попытался использовать это

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;

, и это сработало