堆栈导航在屏幕之间发送参数

Question

我正在尝试在场景之间发送字符串和对象，我当前使用堆栈导航。 目前在更改屏幕时未接收参数，以下是部分代码：

登录

import React, { Component } from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Touchable,
  Image,
  Alert, 
  Pressable, 
  SafeAreaView,
} from "react-native";
import { sendData } from "./Posts";
import { useState } from "react";
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from "@react-navigation/stack";

export type StackParamList = {

    Profile: { userId: string };
    ScreenFirst: { prueba1: string};
};

type Props = {

    navigation: StackNavigationProp<StackParamList,'Profile' >;
    
}

function Login({navigation} : Props): JSX.Element  {
    
    const send = async () => {
       navigation.replace('ScreenFirst', { prueba1:"texto1" })
    };

    return (
        <View>
           <TouchableOpacity style={styles.login} onPress={send}>
              <Text style={styles.btnLogin}>
                 Login
              </Text>
           </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
  
  login: {
    width: 63,
    height: 28,
    backgroundColor: "rgba(143,9,23,1)",
    borderRadius: 3,
    justifyContent: 'center', 
    alignItems: 'center', 
  },
  btnLogin: {
    color: "white"
  },
});

export default Login;

屏幕第一：

import { StackNavigationProp } from "@react-navigation/stack";
import { Pressable, SafeAreaView, StyleSheet, Text, View } from "react-native";
import { sendData } from "./Posts";
import { TextInput } from "react-native-gesture-handler";
import { useState } from "react";
import { CommonActions } from '@react-navigation/native';
import { useRoute } from '@react-navigation/native';

export type StackParamList = {

    Profile: { userId: string };
    ScreenFirst: undefined;
    Login: undefined;
};

type Props = {

    navigation: StackNavigationProp<StackParamList,'Profile' >;
    
}


function App({navigation} : Props): JSX.Element {
    const dataParse = useRoute().params;
    console.log(navigation.getState.arguments);
    console.log(dataParse);
    console.log(navigation.getState, useRoute());

    return (
      <View>
      </View>
    );
}

export default App;

已经尝试使用“function App({route, navigation} : Props): JSX.Element”并且不起作用。 还尝试了更多的东西，但似乎没有任何效果，我在执行 console.log 时总是得到“未定义”。这是它打印的内容： 日志未定义 日志未定义 LOG [匿名函数] {"key": "ScreenFirst-7Um3TSrbi489zPpwCrXAo", "name": "ScreenFirst", "params": undefined}

Answer 1

发送不必是异步的：

    const send = () => {
           navigation.replace('ScreenFirst', { prueba1:"texto1" })
};

尝试使用以下实现：

function App({route,navigation} : Props): JSX.Element {
    const dataParse = route.params;

    console.log(dataParse);

    return (
      <View>
      </View>
    );
}