React Navigationを使って画面遷移をする

がーみReactNative

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;

２つの画面を遷移することができました。

次はTab、Header、Drawerからの画面遷移について書いていく。