【ReactNative】画面遷移する

はじめに

ReactNativeを用いて画面遷移の実装を行っていく。

環境構築に関しては以下のリンクを参照ください。

画面遷移に関して

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

画面遷移を実現するために、下記のライブラリーをインストールします。

以下を実行

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

出力結果

added 29 packages, and audited 1625 packages in 16s

123 packages are looking for funding
  run `npm fund` for details

7 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

画面遷移の実装

画面遷移の実装を行っていきます。

今回はApp.jsに画面遷移元、先を実装しました。コードを交えて説明します。

提供されたコードの内部を詳細に説明します。

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button, View, Text } from 'react-native';

const Stack = createNativeStackNavigator();

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

ライブラリーをimport

Componentをインポートします。

• @react-navigation/native から NavigationContainer コンポーネント
• @react-navigation/native-stack から createNativeStackNavigator コンポーネント
• react-native から Button、View、Text コンポーネント

createNativeStackNavigatorで画面遷移を管理

createNativeStackNavigator を使用して Stack オブジェクトを作成します。このスタックナビゲーションは、アプリケーション内で画面遷移を管理します。

NavigationContainer内で画面遷移先を登録

App 関数は、NavigationContainer コンポーネント内に Stack.Navigator を含み、アプリケーション全体のナビゲーションコンテナを作成します。
Stack.Navigator 内に2つのスクリーンが定義されています。

• "Home" という名前のスクリーンで、初期に表示される画面
• "Details" という名前のスクリーンで、画面遷移後に表示される画面

これらのスクリーンはそれぞれ HomeScreen と DetailsScreen コンポーネントと関連付けられています。

画面遷移元

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

遷移元画面でプロパティを受け取る

HomeScreen 関数コンポーネントは、navigation プロパティを受け取ります。これは、スタックナビゲーション内で画面間の遷移を制御するために使用されます。

Appで登録しているDetails画面に遷移

ボタンが押されると、navigation.navigate('Details') を呼び出して "Details" スクリーンに遷移します。

遷移先

function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>Details Screen</Text>
      <Button
        title="Go back to Home"
        onPress={() => {
          navigation.goBack();
        }}
      />
    </View>
  );
}

画面遷移先でもプロパティを受け取る

DetailsScreen 関数コンポーネントも同様に、navigation プロパティを受け取ります。

一つ前に表示されていた画面に遷移する

ボタンが押されると、navigation.goBack() を呼び出して前の画面に戻ります。
navigation.goBack() は、スタックナビゲーション内で現在の画面を前の画面に戻るためのメソッドです。スタックナビゲーションは、画面をスタックのように管理し、新しい画面をスタックに追加し、navigation.goBack() を呼び出すとスタックの最後の画面に戻るように動作します。

完成

上記の実装により、NavigationContainer と Stack.Navigator を使用して、2つの画面間の画面遷移を実現するReact Nativeのアプリが作成できました。ホーム画面から詳細画面に遷移し、詳細画面からホーム画面に戻ることができます。

最後にスタイルを当てると、

まとめ・感想

画面遷移はReact Navigation　ライブラリーを用いて実装することができました。App上で、NavigationContainer・Stack.Navigator・Stack.Screen で画面遷移を管理して、画面遷移先を指定することによって実現できました。私はまだにクロスプラットフォームになれておらず、webブラウザ上で挙動を確認できることに驚き、感動しています。

他にも良い方法があれば、コメントいただけると大変うれしいです。
良かったと思ったら、いいねやTwitterのフォローよろしくお願いいたします！

個人でアプリを作成しているので、良かったら覗いてみてください！