🔀
ReactNativeのNavigationをTypescriptとHooksで使う
はじめに
react-nativeでは主にReactNavigationが使われます
なのでTypescriptの型付きのHooksを使えるようにします
以下のように使います
import React from 'react';
import {useNav} from '@/hooks/useNav';
import {Button} from 'react-native';
export const StartButton = () => {
const nav = useNav();
return <Button onPress={() => nav.navigate('SignIn')} title="NEXT" />;
};
nav.navigate()の引数に型が使えますので、ルート名を確認する手間が省け、間違えにくくなります
インストール
yarn add @react-navigation/native
関連ライブラリのインストール
- Expoの場合
Expoの場合
npx expo install react-native-screens react-native-safe-area-context
- bareのReactNativeの場合→こちら
Stackナビゲーションのインストール
yarn add @react-navigation/stack
関連ライブラリのインストール
# expoの場合
npx expo install react-native-gesture-handler
# bareのReactNativeの場合
yarn add react-native-gesture-handler
一番上でimportする
src/App.tsx
import 'react-native-gesture-handler';
ナビゲーションのコード
ミソはRootStackParamList
という型を作り、それを利用することです。
ジェネリクスなどで読み込んであげれば、型を補完してくれます。
src/App.tsx
import React from 'react';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {TitlePage, SignInPage} from './features/auth';
export type RootStackParamList = {
Title: undefined;
SignIn: undefined;
};
const Stack = createStackNavigator<RootStackParamList>();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerTitleAlign: 'center'}}>
<Stack.Group>
<Stack.Screen
name="Title"
component={TitlePage}
options={{headerShown: false}}
/>
<Stack.Screen
name="SignIn"
component={SignInPage}
options={{headerTitle: 'ログイン・登録'}}
/>
</Stack.Group>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
※SafeAreaProviderなどは省略
※SafeAreaViewでNavigationContainerをくくると表示されなかったりするので注意
Hooksのコード
useNavigationという便利なhooksが用意されていますが、そのままだと型が効かないので、新しく型つきのHookを定義します
src/hooks/useNav.ts
import {NavigationProp, useNavigation} from '@react-navigation/native';
import type {RootStackParamList} from '../App';
export const useNav = useNavigation<NavigationProp<RootStackParamList>>;
以上です
Discussion