使用@react-navigation/native遇两类问题：reduce报错与TS类型错误

问题1：渲染报错Cannot read property 'reduce' of undefined #

原因 #

你在App组件内部调用createNativeStackNavigator()，导致每次组件渲染都会重新创建导航器实例，引发内部状态异常（preloadedRoutes未正确初始化）。

解决方法 #

将createNativeStackNavigator()的调用移到组件外部：

import { NavigationContainer } from '@react-navigation/native';
import {createNativeStackNavigator, NativeStackScreenProps} from '@react-navigation/native-stack';
import * as React from 'react'
import {Text} from "react-native";

// 移到组件外部，避免重复创建
const LoginStack = createNativeStackNavigator();

type RootStackParamList = {
  Login: undefined
}

// ... 其他代码

问题2：TypeScript错误TS2339: Property navigation does not exist on type #

原因 #

你错误地将屏幕组件的props类型定义为NativeStackNavigationProp，但实际上屏幕组件接收的props是包含navigation和route的对象，正确的类型应该是NativeStackScreenProps。

解决方法 #

修改LoginScreenProps的类型定义：

// 替换原有的LoginScreenProps定义
type LoginScreenProps = NativeStackScreenProps<RootStackParamList, 'Login'>;

const LoginScreen = ({navigation}: LoginScreenProps) => (
    <Text>Test</Text>
)

完整修正后的代码 #

import { NavigationContainer } from '@react-navigation/native';
import {createNativeStackNavigator, NativeStackScreenProps} from '@react-navigation/native-stack';
import * as React from 'react'
import {Text} from "react-native";

const LoginStack = createNativeStackNavigator();

type RootStackParamList = {
  Login: undefined
}

type LoginScreenProps = NativeStackScreenProps<RootStackParamList, 'Login'>;

export default function App() {
  const LoginScreen = ({navigation}: LoginScreenProps) => (
      <Text>Test</Text>
  )

  return (
  <NavigationContainer>
    <LoginStack.Navigator initialRouteName="Login">
      <LoginStack.Screen
        name="Login"
        component={LoginScreen}
      />
    </LoginStack.Navigator>
    </NavigationContainer>
  );
}

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