'string' 类型的 React Native Navigation 参数不可分配给类型参数答案

【问题标题】：React Native Navigation Argument of type 'string' is not assignable to parameter of type'string' 类型的 React Native Navigation 参数不可分配给类型参数
【发布时间】：2022-08-24 17:25:09
【问题描述】：

我对本机反应，反应导航有这个问题，即使出现这个错误，导航流程仍然有效。

\'string\' 类型的参数不能分配给 \'{ key: string; 类型的参数；参数？：未定义；合并？：布尔值 |不明确的; } | {名称：从不；键？：字符串 |不明确的;参数：从不；合并？：布尔值 |不明确的; }\'.ts(2345)

export function LoginContainer() {
    const navigation = useNavigation()
    async function handleSignInEmail() {
        navigation.navigate(\'SingInEmail\')
    }

    return (
        <Container>
                <Image source={Logo} />
                <Title>Você está entrando com uma conta de Cliente.</Title>
                <LoginButton
                    title=\"Entrar com Google\"
                    type=\"google\"
                />
                <LoginButton
                    title=\"Entrar com Facebook\"
                    type=\"facebook\"
                />
                <Divisor/>
                <Links
                    title=\"Entrar com Email\"
                    onPress={handleSignInEmail}
                />
                <Links
                    title=\"Cadastrar-se\"
                />
        </Container>
    )
}

错误发生在navigation.navigate(\'SingInEmail\')

我的 package.json

{
  \"name\": \"smart-delivery\",
  \"version\": \"1.0.0\",
  \"main\": \"index.js\",
  \"scripts\": {
    \"android\": \"expo run:android\",
    \"ios\": \"expo run:ios\",
    \"web\": \"expo start --web\",
    \"start\": \"react-native start\"
  },
  \"dependencies\": {
    \"@expo-google-fonts/josefin-sans\": \"^0.2.0\",
    \"@expo-google-fonts/ubuntu\": \"^0.2.0\",
    \"@react-navigation/native\": \"^5.9.4\",
    \"@react-navigation/stack\": \"^5.14.5\",
    \"expo\": \"~43.0.2\",
    \"expo-app-loading\": \"~1.2.1\",
    \"expo-font\": \"~10.0.3\",
    \"expo-splash-screen\": \"~0.13.5\",
    \"expo-status-bar\": \"~1.1.0\",
    \"expo-updates\": \"~0.10.13\",
    \"react\": \"17.0.1\",
    \"react-dom\": \"17.0.1\",
    \"react-native\": \"0.64.3\",
    \"react-native-gesture-handler\": \"~1.10.2\",
    \"react-native-iphone-x-helper\": \"^1.3.1\",
    \"react-native-reanimated\": \"~2.2.0\",
    \"react-native-responsive-fontsize\": \"^0.5.1\",
    \"react-native-safe-area-context\": \"3.3.2\",
    \"react-native-screens\": \"~3.8.0\",
    \"react-native-svg\": \"12.1.1\",
    \"react-native-web\": \"0.17.1\",
    \"styled-components\": \"^5.3.3\"
  },
  \"devDependencies\": {
    \"@babel/core\": \"^7.12.9\",
    \"@types/react\": \"~17.0.21\",
    \"@types/react-native\": \"~0.64.12\",
    \"@types/styled-components-react-native\": \"^5.1.3\",
    \"typescript\": \"~4.3.5\"
  },
  \"private\": true
}

我相信错误在打字稿中，我正在使用这个模板。

我的路线都以 index.tsx 为中心，就是这样。

const { Navigator, Screen } = createNativeStackNavigator();

export function Routes() {
    return (
        <NavigationContainer>
            <Navigator
                screenOptions={{
                    headerShown: false
                }}
            >
                <Screen
                    name=\"AccessType\"
                    component={AccessType}
                />
                <Screen
                    name=\"SignIn\"
                    component={SignIn}
                />
            </Navigator>
        </NavigationContainer>
    )
}

我没有看到任何登录电子邮件屏幕，也许您可以将其替换为登入

标签： typescript react-native react-navigation react-native-navigation

【解决方案1】：

我想您的问题是您正在尝试导航到不在路由器/导航容器中的路线。

调用navigation.navigate('SingInEmail') 时，您的组件是SingInEmail，它不在屏幕中。

我想你的意思是写navigation.navigate('SignIn') 这是一个屏幕，所以导航返回到组件SignIn。

【讨论】：

他提到导航流程仍然正常工作，这里的问题在于类型。我也遇到了同样的问题，因为 linter/intellisense 告诉我一个字符串不能作为参数分配给navigation.navigate。

【解决方案2】：

是的，您正在尝试导航到“SignInEmail”而不是“SignIn”

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案3】：

这里的问题是，当您使用 typescript 时，IntelliSense 会发挥作用，它会警告您不正确的类型使用。你看，navigate函数的定义如下：

navigate<RouteName extends keyof ParamList>(options: {
    key: string;
    params?: ParamList[RouteName];
    merge?: boolean;
} | {
    name: RouteName;
    key?: string;
    params: ParamList[RouteName];
    merge?: boolean;
}): void;

它需要一个具有两种可能形式的对象。第一种形式强制您定义一个对象，例如o = {key: 'some key'}，其他两个对象键是可选的，如文档中指定的（注意params 和merge 的定义）。

第二种形式需要一个定义为o = {'name': '<route-name>', ...} 的对象，这就是您要查找的对象。尽管params 在这种形式中不是可选的，但在这种情况下您不需要指定它，并且在这种情况下您必须定义key（我不知道为什么，因为它被定义为可选）。

总之，您可以使用以下功能，IntelliSense 会很高兴。

function to(page: string): void {
  let m = {
      name: page,
      key: '',
  }
  navigation.navigate(m);
}

【讨论】：

【解决方案4】：

您必须为 react-navigation 提供类型检查。关于这个你可以阅读here。

type RootStackParamList = {
  Home: undefined;
  SingInEmail: undefined;
};

...

import { createStackNavigator } from '@react-navigation/stack';

const RootStack = createStackNavigator<RootStackParamList>();

在此之后，您可以为您的根导航器指定一个全局类型，而不是手动注释这些 API，该类型将用作默认类型。

为此，您可以在代码库中的某处添加此 sn-p：

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

【讨论】：