React Navigationでの画面遷移の方法を覚えたので、基本的な使い方と必要なライブラリのインストール方法をまとめておきます。
Version
react 16.13.1
react-native 0.63.4
react-navigation/native 5.9.2
react-navigation/stack 5.14.2
必要なライブラリをインストールします。
# コアライブラリのインストール
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による画面遷移の方法でやります。
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で指定したルートのコンポーネントに画面遷移することが可能になります。