サイト管理者
React Native
AndroidiOSReactReactNativeReactNavigation

React NativeのNavigationを使っていい感じに画面遷移する

React Native
この記事は約6分で読めます。

やりたいこと

  • React NativeのReact Navigationというライブラリを使って画面遷移をしたい
  • 画面が多くなっても管理しやすい形でまとめたい

前提条件

  • React Nativeの環境構築が終わっている
  • 何かしらプロジェクトが作成されている(initされていればOK)

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

公式ドキュメントにしたがって必要なライブラリをインストールします

yarn add @react-navigation/native
yarn add @react-navigation/stack

@react-navigation/stackと依存関係にあるライブラリもインストールします。

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

ライブラリをインストールしたのでpod installも一応やっておきましょう

cd ios && pod install && cd ..
react-native run-ios

これで下準備が完了！

ディレクトリを作る

srcディレクトリを作成し、さらにその中にnavigationとscreensのディレクトリを作成します


ファイルを作る

  • navigationの中にindex.jsを作成します
  • screensの中にHomeScreen.jsとDetailScreen.jsを作成します 

navigation配下のindex.jsではcreateStackNavigatorを用いて画面一覧を記述していきます。
これにより画面ごとに遷移が可能となります。
公式ドキュメント

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import DetailScreen from '../screens/DetailScreen';

const RootStack = createStackNavigator();

const RootStackScreen = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen name="Home" component={HomeScreen} />
        <RootStack.Screen name="Detail" component={DetailScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

export default RootStackScreen;

まだHomeScreenやDetailScreenには何も書いていないのでこちらもnavigationを行うための記述をしましょう
navigationというpropsを渡すことで自由に画面遷移ができます
公式ドキュメント

import React from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';

const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Text>HomeScreen</Text>
      <Button
        title="Detail画面に遷移する"
        onPress={() => {
          navigation.navigate('Detail');
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default HomeScreen;

同様にDetailScreenでもHomeScreenに遷移する用のボタンを用意しnavigationの処理を追加します

import React from 'react';
import {StyleSheet, View, Text, Button} from 'react-native';

const DetailScreen = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Text>DetailScreen</Text>
      <Button
        title="Home画面に遷移する"
        onPress={() => {
          navigation.navigate('Home');
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default DetailScreen;

これで画面遷移がお互いにできる状態となりました。

App.jsでRootStackScreenを受け取る

最後にApp.jsでRootStackScreenを受け取れば終わりです

App.js

import React from 'react';
import RootStackScreen from './src/navigations/';

const App = () => <RootStackScreen />;
export default App;

まとめ

screenを格納するディレクトリを作成し、画面遷移用にファイルを分けることでnavigation配下のindex.jsでは画面をimportしてRootStack.Screenを羅列するだけで良くなりますね。（画面が多くなっても1つのファイルで管理出来る）


実際の開発では画面数が多い場合もあるので、navigation用のファイルを作成すると管理がしやすくなるのかなと思います。

参考

https://reactnavigation.org/
https://www.digitalocean.com/community/tutorials/react-react-native-navigation-ja