React Navigationの公式サイトからドキュメントを見て進める
version:5.x
https://reactnavigation.org/docs/getting-started
まずはインストール
npm install @react-navigation/native
今回はExpoを使ったアプリケーションを作成するので、依存関係をインストールします。
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
目次
Hello ReactNavigation
https://reactnavigation.org/docs/hello-react-navigation
とりあえずReactNavigationのStackを使って画面がでるようにします。
画面遷移を管理するファイルを用意(AppNavigator.tsx)
画面用のファイルを作成(AuthSelectScreen.tsx)
App.tsxに画面遷移用のコンポーネントを呼び出す
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppNavigator from './src/navigations/AppNavigator';
const App: React.FC = () => {
return <AppNavigator />;
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AuthSelectScreen from '../screens/AuthSelectScreen';
const Stack = createStackNavigator();
const AppNavigator: React.FC = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={AuthSelectScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default AppNavigator;
import React from 'react';
import { View, Text } from 'react-native';
const AuthSelectScreen: React.FC = () => {
return (
<View>
<Text>testetstetts</Text>
</View>
);
};
export default AuthSelectScreen;

Moving between screens
画面を出力できたので、今度は画面遷移をしてみる。
また、TypeScriptで記述しているので、以下を参考に書き換えています。
https://reactnavigation.org/docs/typescript/
もう一つ画面用のファイルを作成する(SignInScreen.tsx)
import React from 'react';
import { View, Text, Button } from 'react-native';
import { StackScreenProps } from '@react-navigation/stack';
type RootStackParamList = {
Home: undefined;
SignIn: undefined;
};
type Props = StackScreenProps<RootStackParamList>;
const SignInScreen: React.FC<Props> = ({ navigation }: Props) => {
return (
<View>
<Button title="Go to Details" onPress={() => navigation.goBack()} />
</View>
);
};
export default SignInScreen;
遷移先をAuthSelectScreen.tsxで指定する
import React from 'react';
import { View, Text, Button } from 'react-native';
import { StackScreenProps } from '@react-navigation/stack';
type RootStackParamList = {
Home: undefined;
SignIn: undefined;
};
type Props = StackScreenProps<RootStackParamList, 'SignIn'>;
const AuthSelectScreen: React.FC<Props> = ({ navigation }: Props) => {
return (
<View>
<Button
title="Go to Details"
onPress={() => navigation.navigate('SignIn')}
/>
</View>
);
};
export default AuthSelectScreen;
AppNavigatorに新しい画面を追加する
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AuthSelectScreen from '../screens/AuthSelectScreen';
import SignInScreen from '../screens/SignInScreen';
const Stack = createStackNavigator();
const AppNavigator: React.FC = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={AuthSelectScreen} />
<Stack.Screen name="SignIn" component={SignInScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default AppNavigator;


2つの画面を遷移することができました。
次はTab、Header、Drawerからの画面遷移について書いていく。