使用 TypeScript 设置您的 React Native 移动应用程序导航非常简单。 理解它只需要两个步骤。

如果您了解所涉及的两个步骤，那么您将能够通过完整的类型检查为您的 React Native 应用程序构建任何导航。

1. 键入检查导航器。
2. 键入检查各个屏幕。

让我们创建一个包含 3 个屏幕的原生堆栈导航结构：主页、设置和配置文件屏幕。

类型检查导航器

您需要做的第一件事是创建一个对象类型，其中包含路由名称到路由参数的映射。 在我们的例子中，我们的 Screens 不依赖于任何参数，所以我们将路由名称映射到 undefined。

// I call this object type RootStackParamListexport type RootStackParamList = {
    Home: undefined;
    Profile: undefined;
    Settings: undefined;
};

现在，当您使用 createXNavigator 创建导航器时（X 可以是 Stack、BottomTab、Drawer），您必须让它知道您在上面创建的结构。

//Instead of this
//const Stack = createNativeStackNavigator();
// Do this
const Stack = createNativeStackNavigator();

现在我们可以如下创建我们的导航器：

     } />
     } />
     } />

上面的代码是完全类型检查的，屏幕的名称道具只能是您的 RootStackParamList 中定义的名称之一。 已经享受 TypeScript 的好处了。

这将为 Navigator 和 Screen 组件的 props 提供类型检查和 IntelliSense。 Navigator 的 initialRouteName 属性只能是 RootStackParamList 对象中定义的键之一（Home、Profile、Settings）。

现在进入第二步。

类型检查单个屏幕

为什么我们需要对单个屏幕进行类型检查，这是因为我们需要对屏幕接收到的导航道具和路线道具进行注释。 当我们想要导航到另一个屏幕时，我们需要 IntelliSense，我们不想继续前往导航器来检查我们的屏幕的名称，我们希望 TypeScript 向我们显示有效/可用的名称。

// Every react-navigation screen receives route and navigation props
function ProfileScreen({ route, navigation }) {
  // ...
}

React Navigation 中的 navigator 包导出一个泛型类型，以从相应的 navigator 定义 navigation 和 route props 的类型。

例如，您可以将 NativeStackScreenProps 用于 Native Stack Navigator (@react-navigation/native)，StackScreenProps 用于 Stack Navigator (@react-navigation/stack)，DrawerScreenProps 用于 Drawer Navigator (@react-navigation/drawer)，BottomTabScreenProps 用于底部 选项卡导航器（@react-navigation/bottom-tabs）等等。

对于我们的案例，我们将 NativeStackScreenProps 用于 Native Stack Navigator。

这种类型需要 3 个泛型：

1. 为导航器定义了参数列表对象（RootStackParamList）
2. 当前画面所属的路由名称。
3. 导航器的 ID（这是可选的）

例如，

type Props = NativeStackScreenProps;

现在让我们将其应用于我们的个人资料屏幕。

type ProfileProps = NativeStackScreenProps;// Every react-navigation screen receives route and navigation props
function ProfileScreen({ route, navigation } : ProfileProps) {
    // ...
}

这现在允许我们输入检查路线名称和您正在使用导航、推送等导航的参数。TypeScript 现在知道可以从配置文件屏幕导航到哪些屏幕，如下所示。

对于我们的设置屏幕需要用户 ID 作为参数的场景，我们的参数列表将如下所示：

export type RootStackParamList = {
    Home: undefined;
    Profile: undefined;
    Settings: {
        userId: number;
    };};

现在 TypeScript 突出显示了 navigation.navigate('Settings')，如下所示：

这是因为我们定义了 Settings 路由来接受 params 列表中的 userID 参数。 这正是我们希望我们的导航由 TypeScript 进行类型检查的原因。

将鼠标悬停在导航上会显示如上所示的确切预期。

现在，在将带有 userID 的 params 对象作为导航函数中的第二个参数传递后，错误就消失了。

享受使用 TypeScript 提供的正确类型检查和智能感知来构建你的 React Navigation。

根据 React Navigation 的建议，您可以根据您的项目将所有类型提取到单独的文件中。

import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
import { Button, View } from 'react-native';

export type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
  Settings: {
    userId: number;
  };
};

const Stack = createNativeStackNavigator();


   } />
  
   } />



type ProfileProps = NativeStackScreenProps;

// Every react-navigation screen receives route and navigation props
function ProfileScreen({ route, navigation }: ProfileProps) {

  return (
     {

        navigation.navigate('Settings', {
          userId: 4
        });
        
      }}
    />
  )
}

我将在下一个系列中介绍如何处理嵌套屏幕。

关注七爪网，获取更多APP/小程序/网站源码资源！