React Native Stack Navigation页面间传参失败求助

问题现象 #

使用Stack Navigation从Login页面跳转至ScreenFirst页面时，传入的参数prueba1: "texto1"无法被接收，控制台输出参数均为undefined，具体日志如下：

LOG  undefined
LOG  undefined
LOG  [Function anonymous] {"key": "ScreenFirst-7Um3TSrbi489zPpwCrXAo", "name": "ScreenFirst", "params": undefined}

代码示例 #

Login页面代码 #

import React from "react";
import { StyleSheet, View, Text, TouchableOpacity } from "react-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;

ScreenFirst页面代码 #

import { StackNavigationProp } from "@react-navigation/stack";
import { View } from "react-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;

问题根源 #

1. 重复定义类型导致不匹配：两个页面各自定义了StackParamList，Login页面中ScreenFirst要求传入{ prueba1: string}，但ScreenFirst页面将ScreenFirst的参数定义为undefined，导航器无法识别传入的参数，直接忽略。
2. 导航类型绑定错误：两个页面的Props都绑定了Profile路由的导航类型，而非当前页面对应的路由类型，类型不匹配导致参数无法正确映射。
3. 参数获取无类型断言：未对route.params做类型断言，TypeScript无法正确推导参数类型，也可能导致参数丢失。

解决方案 #

1. 统一路由类型定义 #

创建公共类型文件（如src/navigation/types.ts），统一管理所有路由的参数类型，避免重复定义：

// src/navigation/types.ts
export type StackParamList = {
  Login: undefined;
  ScreenFirst: { prueba1: string };
  Profile: { userId: string };
};

2. 修正Login页面的导航类型 #

引入公共类型，并将导航类型绑定到Login路由：

// Login.tsx
import { StackNavigationProp } from "@react-navigation/stack";
import { StackParamList } from '../navigation/types';

// 修正Props类型为Login路由对应的导航类型
type Props = {
  navigation: StackNavigationProp<StackParamList, 'Login'>;
};

3. 修正ScreenFirst页面的代码 #

• 引入公共类型，修正ScreenFirst的参数定义
• 将导航类型绑定到ScreenFirst路由
• 对参数做类型断言，确保正确获取参数

修改后的ScreenFirst页面代码（建议将组件名改为ScreenFirst而非App）：

// ScreenFirst.tsx
import { StackNavigationProp } from "@react-navigation/stack";
import { View, Text } from "react-native";
import { useRoute } from '@react-navigation/native';
import { StackParamList } from '../navigation/types';

// 修正Props类型为ScreenFirst路由对应的导航类型
type Props = {
  navigation: StackNavigationProp<StackParamList, 'ScreenFirst'>;
};

function ScreenFirst({ navigation }: Props): JSX.Element {
  const route = useRoute();
  // 类型断言确保参数类型正确
  const { prueba1 } = route.params as StackParamList['ScreenFirst'];

  console.log('Received parameter:', prueba1); // 输出"texto1"

  return (
    <View>
      <Text>参数内容：{prueba1}</Text>
    </View>
  );
}

export default ScreenFirst;

4. 配置导航器使用统一类型 #

创建Stack Navigator时，指定公共的StackParamList类型：

// src/navigation/AppNavigator.tsx
import { createStackNavigator } from '@react-navigation/stack';
import { StackParamList } from './types';
import Login from '../screens/Login';
import ScreenFirst from '../screens/ScreenFirst';
import Profile from '../screens/Profile';

const Stack = createStackNavigator<StackParamList>();

export default function AppNavigator() {
  return (
    <Stack.Navigator initialRouteName="Login">
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="ScreenFirst" component={ScreenFirst} />
      <Stack.Screen name="Profile" component={Profile} />
    </Stack.Navigator>
  );
}

完成以上修改后，再次跳转页面即可正常接收参数。

内容的提问来源于stack exchange，提问作者Jono