【React Native】画面移動を実装する方法|React Navigationの例

今回は、React Nativeで開発しているアプリで画面の移動を実装する方法となります。

アプリの画面の移動にはナビゲータと呼ばれる機能で処理を行います。例では、そのナビゲータの処理を簡単に行える「React Navigation」ライブラリを利用して、画面の移動を実装します。

【React Native】React Navigationで画面移動を実装する例

今回は、次のようなHome画面とDetails画面を作成し、その画面を移動する簡単な例となります。また、React Navigationのバージョンは5.xとなります。

Home画面の画像

Home画面には「Go to Details」ボタンがあり、タップするとDetails画面に移動します。

Details画面の画像

Details画面には4つのボタンがあり、それぞれ次の機能となります。

  • Go to Home(Home画面に移動)
  • Go back(1つ前の画面に戻る)
  • Go back to first screen in stack(最初に表示する画面に戻る)
  • Go to Details... again(Details画面を追加)

実際の挙動は以下のExpo Snackで確認できます。

https://snack.expo.io/@yic666kr/-react-navigation-moving-between-screens-sample

例では、ExpoでReactNativeの開発環境を構築してある前提としています。Expoで開発環境を構築する方法については以下のリンク先を参考にしてみてください。

React Navigationをインストール

まず、プロジェクトに以下のコマンドでReact Navigationをインストールします。

npm install @react-navigation/native @react-navigation/stack

次に、React Navigationが依存するパッケージを、プロジェクトに以下のコマンドでインストールします。

expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

上記のexpoコマンドでは、以下のパッケージをインストールしています。

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

画面移動を実装するコードの例

以下、画面移動を実装するコードの例となり、App.jsファイルに記述します。

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

// React Navigation Module
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'


const Stack = createStackNavigator()

function App() {
  return (
    <NavigationContainer>
    
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
        />

        <Stack.Screen 
          name="Details" 
          component={DetailsScreen} 
        />
      </Stack.Navigator>

    </NavigationContainer>
  )
}


function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />     
    </View>
  )
}


function DetailsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Details Screen</Text>

      <View style={styles.button_group}>
        <Button 
          title="Go to Home" 
          onPress={() => navigation.navigate('Home')}
        />
        
        <Button 
          title="Go back" 
          onPress={() => navigation.goBack()} 
        />
        
        <Button
          title="Go back to first screen in stack"
          onPress={() => navigation.popToTop()}
        />

        <Button
          title="Go to Details... again"
          onPress={() => navigation.push('Details')}
        />
      </View>

    </View>
  )
}


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

  text: {
    margin: 14,
    fontSize: 20,
    color: '#333',
  },

  button_group: {
    justifyContent: 'space-around',
    height: 300,
    padding: 20,
    backgroundColor: '#fff',
  }
})


export default App

React Nativeのコードの説明

以下、React Nativeのコードのポイントとなる箇所の説明となります。

モジュールからインポート

コードの1行目からの箇所では、次のようにモジュールから利用するコンポーネントなどをインポートしています。

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

// React Navigation Module
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

React Navigationで管理する画面を定義

コードの9行目からの箇所では、次のようにApp関数で、React Navigationを利用して管理する画面を定義しています。

const Stack = createStackNavigator()

function App() {
  return (
    <NavigationContainer>
    
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
        />

        <Stack.Screen 
          name="Details" 
          component={DetailsScreen} 
        />
      </Stack.Navigator>

    </NavigationContainer>
  )
}

NavigationContainerコンポーネントについて

React Navigationを利用するには、すべてのナビゲータの構造をNavigationContainerコンポーネントで囲みます。通常は上記のようにアプリのルートとなるApp.jsでレンダリングします。

createStackNavigatorのNavigator・Screenコンポーネントについて

React Navigationには、いくつかのナビゲータがありますが、今回は、画面が重なるように移動する基本的なcreateStackNavigatorを利用してナビゲータの構造を定義します。

createStackNavigatorはNavigator・Screenコンポーネントを返す関数となり、Screenコンポーネントで画面を定義して、すべてのScreenコンポーネントをNavigatorコンポーネントで囲みます。

Screenコンポーネントの必須propsはnameとcomponentとなり、nameには画面の名前、componentには作成した画面のコンポーネントを指定します。

NavigatorコンポーネントのpropsのinitialRouteNameには、 ナビゲータで最初に表示する画面の名前を指定します。

Home画面のコンポーネントを作成

コードの32行目からの箇所では、次のようにHomeScreen関数を定義して、Home画面のコンポーネントを作成しています。

function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />     
    </View>
  )
}

Screenコンポーネントで定義した画面のコンポーネントでは、画面移動などを扱えるnavigationのオブジェクトを利用できます。

HomeScreen関数では、 ButtonコンポーネントのonPressの値に関数を指定し、その関数の戻り値にnavigation.navigateメソッドを指定します。メソッドの引数には移動する画面の名前を指定します。

それにより、Home画面の「Go to Details」ボタンをタップするとDetails画面に移動します。

Details画面のコンポーネントを作成

コードの32行目からの箇所では、次のようにDetailsScreen関数を定義して、Details画面のコンポーネントを作成しています。

function DetailsScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Details Screen</Text>

      <View style={styles.button_group}>
        <Button 
          title="Go to Home" 
          onPress={() => navigation.navigate('Home')}
        />
        
        <Button 
          title="Go back" 
          onPress={() => navigation.goBack()} 
        />
        
        <Button
          title="Go back to first screen in stack"
          onPress={() => navigation.popToTop()}
        />

        <Button
          title="Go to Details... again"
          onPress={() => navigation.push('Details')}
        />
      </View>

    </View>
  )
}

DetailsScreen関数では、 4つのButtonコンポーネントを作成し、それぞれのonPressの値に関数を指定し、その関数の戻り値に次のメソッドを指定しています。

 メソッド機能
navigation.navigate('Home')メソッドの引数に指定した画面に移動
navigation.goBack()前の画面に戻る
navigation.popToTop() ナビゲータで最初に表示する画面に戻る
navigation.push('Details')メソッドの引数に指定した画面を追加

それにより、Details画面のそれぞれのボタンをタップすると、それぞれ指定した画面移動を行います。

まとめ

React Navigationには、さまざまな設定オプションや、タブメニュー・Drawerメニュー(スライドするメニュー)を利用した画面移動も利用できます。

React Navigationの詳細な利用方法については、文末の参考サイト内を確認しみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。