react native type 스크립트 'string'은 사용 중인 'never' 유형의 매개 변수에 할당할 수 없습니다. 탐색

react native type 스크립트 'string'은 사용 중인 'never' 유형의 매개 변수에 할당할 수 없습니다. 탐색

[리액트 네이티브 유형 스크립트에서 'never' 유형의 매개 변수에 'string'을 할당할 수 없다는 오류가 계속 발생하고 있으며, 그 이유는 알 수 없습니다. 누가 이 버그를 고치는 것을 도와줄 수 있나요?

미리 감사드립니다.]

코드 조각:

const loadReport = (id: string) => {
    setPostId(id);
    navigation.navigate('Report', {postId: id});
}

나는 '보고서' 아래에 밑줄이 있다.

---

내가 찾은 유일한 해결책은 문자열 이름에 절대 유형을 적용하지 않는 것이다.

const goToContent = () => {
    navigate("Content" as never, {} as never);
};

그것이 최선의 해결책인지는 모르겠지만, 그것은 일이다.

---

이것은 RN > 0.65에서 발생하는 이상한 문제입니다. 내 해결책:

1.- 가져오기:

{/* Depends of your Package (Stack or NativeStack...) */}
import { StackNavigationProp } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/core';

2.- 유형 정의

export type RootStackParamList = {
  YourScreen: { id: number } | undefined;
};

3.- StackNavigationProp 유형의 내비게이션 후크 사용을 지정합니다.

const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();

4.- 사용! (눈: 이 유형으로 내비게이션 개체에 액세스할 수 있습니다.)

<TouchableOpacity
   // Use this when you pass a parameter (is optional)
   onPress={() => navigation.navigate('YourScreen', {id: 5})}>
</TouchableOpacity>

5.- 다음 사항을 기억하십시오.

• 정의되지 않은 것을 지정하면 경로에 매개 변수가 없음을 의미합니다. 정의되지 않은 =>이 있는 결합 유형은 매개 변수가 선택 사항임을 의미합니다.

• useNavigation const에는 특수 유형이 있으며 이 최종 유형은 세 가지 제네릭을 사용합니다.

• 매개 변수 목록 개체 =>

• 화면 경로 이름 =>

• 네비게이터 아이디(선택사항) =>

다음에서 얻음:

---

저도 주석을 달지 않고 전화를 걸려고 할 때 다음과 같은 TS 오류가 발생했습니다.'

Argument of type 'string' is not assignable to parameter of type '{ key: string; params?: undefined; merge?: boolean | undefined; } | { name: never; key?: string | undefined; params: never; merge?: boolean | undefined; }'

OP는 사용 중인 React-Navigation 버전을 지정하지 않지만 React Navigation 6에서 전체적으로 수정할 수 있습니다. 즉, 직접 주석을 달 필요는 없지만 자동 완성 및 유형 검사가 계속됩니다.

2021년 8월 리액트 네비게이션 블로그에서 발췌( ):

React Navigation 6에서는 자동 완성 및 유형 확인을 위해 주석을 달 필요가 없습니다. 이는 선언 병합을 사용하여 전체적으로 화면 유형을 정의함으로써 가능합니다.

declare global {   
  namespace ReactNavigation {
    interface RootParamList {
      Home: undefined;
      Profile: { userId: string };
      NotFound: undefined;
    }   
  } 
 } 

읽을 수 있어요.

다른 곳에 이미 선언된 파라미터가 있는 경우 React Navigation 6 문서의 다른 예:

// E.g. RootStackParamList.ts
export type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  NotFound: undefined;
};

// E.g. App.tsx
import { RootStackParamList } from 'path/to/RootStackParamList';
declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

---

NativeStackNavigationProp 유형에 모든 항목을 추가하는 간단한 솔루션

const AppLink = ({
  text,
  screenName,
}: Link) => {

  // pass any to overload 
  const navigation = useNavigation<NativeStackNavigationProp<any>>();

  const handleNavigation = () => {
    navigation.navigate(screenName);
  };  
  
  return (
    <TouchableOpacity onPress={handleNavigation}>
      <Text>{text}</Text>
    </TouchableOpacity>
  );
};

export default AppLink;

---

당신은 유지보수가 가능한 내비게이션 소품을 만들 수 있다.

1. 활자 파일을 만들다.

// navigation.ts
import { DrawerNavigationProp } from "@react-navigation/drawer";
import { NavigationProp } from "@react-navigation/native";
import { StackNavigationProp } from "@react-navigation/stack";

type RootStackParamList = {
  // Your custom param type belongs here.
  Login: {
    id: string;
  },
  Profile: {}, 
}

type RootDrawerParamList = {
  Shopping: {},
  Chat: {},
}

export type RootNavigationProp = NavigationProp<
 StackNavigationProp<RootStackParamList>,
 DrawerNavigationProp<RootDrawerParamList>
>;

2. 쓰세요.

import { useNavigation } from "@react-navigation/native";
import { RootNavigationProp } from "@somewhere/navigation";

const App = () => {
  const navigation = useNavigation<RootNavigationProp>();

  function onPress () {
    navigation.navigate("Login", {id: "userID"});
  }
}

---

후크를 호출할 때 유형만 사용하십시오.

const navigation = useNavigation<any>();

이 방법은 권장되지 않지만 코드 오류가 사라집니다.

---

저도 이 문제에 부딪혔어요. 제 경우에는 Ignite 보일러 플레이트부터 시작했죠. 다음을 사용하여 해결했습니다.

const navigation = useNavigation<NativeStackNavigationProp<AppStackParamList>>()

여기서 은(는) 에 정의되어 있습니다. 네비게이터가 둘 이상 있을 수 있으며, 구성요소가 있는 네비게이터에 적합한 매개변수 목록을 사용할 수 있습니다. 매개 변수 목록(대신)을 유형 시스템에 전달하면 에서 제안할 경로 이름 목록과 실제 화면 목록과 관련된 다른 것들을 유추할 수 있습니다.