WebLog

React Navigationのnavigateとrouteの型定義

2022/11/20 22:14

navigator を作るときにやること

navigator を作るときに、ルートの名前と引数の型を定義するには、まず初めにルートの名前とそのルートの引数の型の対応表となるオブジェクトを作ります。

1// typeで作ること。interfaceではダメらしい
2// 参考:https://reactnavigation.org/docs/typescript/#annotating-usenavigation
3type RootStackParamList = {
4 Home: undefined; // Homeには引数が必要ない
5 Profile: { userId: string };
6 Feed: { sort: "latest" | "top" } | undefined; // Feedには引数があったら{ sort: "latest" | "top" }型で、無くてもOK
7};

対応表となるオブジェクトを作ったらそれを使って実際にnavigatorを作ります:

1import { createStackNavigator } from "@react-navigation/stack";
2
3const RootStack = createStackNavigator<RootStackParamList>();

そして以下のように使います:

1<RootStack.Navigator initialRouteName="Home">
2 <RootStack.Screen name="Home" component={Home} />
3 <RootStack.Screen
4 name="Profile"
5 component={Profile}
6 initialParams={{ userId: user.id }}
7 />
8 <RootStack.Screen name="Feed" component={Feed} />
9</RootStack.Navigator>

screen を作るときにやること

screen を作るときに、先ほど定義したルートごとの型定義を反映させるにはnavigator毎に便利な型があります。

例えばStackNavigatorに対しては、以下のようにします:

1import type { NativeStackScrennProps } from "@react-navigation/native-stack";
2
3type RootStackParamList = {
4 Home: undefined;
5 Profile: { userId: string };
6 Feed: { sort: "latest" | "top" } | undefined;
7};
8
9type Props = NativeStackScrennProps<RootStackParamList, "Profile">;

NativeStackScrennPropsはジェネリックスで以下の 3 つを引数にとります:

  1. 先ほど定義したルートごとの引数の型の対応表となるオブジェクト(ここではRootStackParamList)
  2. スクリーンが属するルートの名前(ここではProfile)
  3. (任意)navigatorの ID(多分あまり使わない、ここでいう ID とは恐らくこれ)

StackNavigator以外の場合では以下のような型が用意されています:

  • StackSceenProps(@react-navigation/stack用)
  • DrawerSceenProps(@react-navigation/drawer用)
  • BottomTabScreenProps(@react-navigation/bottom-tabs用)

関数コンポーネントでは:

1function ProfileScreen({ route, navigation }: Props) {
2 // ...
3}
4
5const ProfileScreen: React.FC<Props> = ({ route, navigation }) => {
6 // ...
7};

クラスコンポーネントでは:

1class ProfileScreen extends React.Component<Props> {
2 render() {
3 // ...
4 }
5}

route と navigation に対する型付けをそれぞれ行う

routenavigationに対する型付けをそれぞれ行うこともできます。 このときも便利な型が用意されていて、例えばnavigationだけなら以下のような感じ:

1import type { NativeStackNavigationProps } from "@react-navigation/native-stack";
2
3type ProfileScreenNavigationProp = NativeStackNavigationProps<
4 RootStackParamList,
5 "Profile"
6>;

routeだけなら以下のような感じ:

1import type { RouteProp } from "@react-navigation/native";
2
3type ProfileScreenRouteProp = RouteProp<RootStackParamList, "Profile">;

参考

Type checking with TypeScript | React Navigation
Type checking with TypeScript | React Navigation

Type checking with TypeScript | React Navigation

React Navigation is written with TypeScript and exports type definitions for TypeScript projects.

最新の投稿