さいとブログ

React Navigationでの画面遷移の方法を覚えたので、基本的な使い方と必要なライブラリのインストール方法をまとめておきます。

Version

react 16.13.1
react-native 0.63.4
react-navigation/native 5.9.2
react-navigation/stack 5.14.2

目的

• React NAvigationの初期セッティングができるようになる
• アプリでの画面遷移を実装できるようになる

手順

ライブラリのインストール

必要なライブラリをインストールします。

# コアライブラリのインストール
npm install @react-navigation/native

# 依存ライブラリのインストール
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

# stackナビゲーターのインストール
npm install @react-navigation/stack

# メモのためインストールしなくてOK
# tabナビゲーターのインストール
npm install @react-navigation/bottom-tabs
# drawerナビゲーターのインストール
npm install @react-navigation/drawer

各ナビゲーターの特徴は次の通りです。

• stack: 左右にスライドして画面を切り替える
• tabs: Footerに表示されるタブを選択して画面を切り替える
• drawer 画面端から現れるサイドメニューで画面を切り替える

今回はstackによる画面遷移の方法でやります。

ルーティング専用のコンポーネント作成

Navigation.jsを作成します。

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Home} from './components/home/Home';
import {Login} from './components/login/Login';

const Stack = createStackNavigator();

 return (
  <NavigationContainer>
   <Stack.Navigator>
    <Stack.Screen name="home" component={Home} />
    <Stack.Screen name="login" component={Login} />
   </Stack.Navigator>
  </NavigationContainer>
 );
};

10行目のでラップすることでその中のコンポーネントで画面遷移の機能を実装することができます。
11行目のでラップすることでstackナビゲーターを中のコンポーネントで使用することができます。
初期画面としてHomeコンポーネントを表示するように設定されています。

画面間の移動

Home画面にLogin画面へ遷移するためのボタンを作成します。

export const Home = ({navigation}) => {
 return (
  <View>
   <View>
    <Text>ホーム</Text>
   </View>
   <View>
    <TouchableOpacity onPress={() => navigation.navigate('login')}>
     <Text>login画面へ</Text>
    </TouchableOpacity>
   </View>
  </View>

componentの引数として{navigation}を渡して、navigation.navigate(ルート名)とすることで、
のnameで指定したルートのコンポーネントに画面遷移することが可能になります。

参考

• React Navigation