React Native ナビゲーション: 例を含むチュートリアル

この React Native Navigation チュートリアルの最終更新日は 2022 年 12 月 1 日で、React Navigation の最新バージョン (執筆時点では v6) に関する情報と、React Navigation と React Router ライブラリを比較するセクションが含まれています。React Navigation と React Native Navigation を確認してください: どちらがあなたに適していますか? もっと詳しい情報を知るために。

モバイルアプリは複数の画面で構成されます。モバイルアプリを構築する場合、主な懸念事項は、画面のプレゼンテーションや画面間の遷移など、アプリ内でのユーザーナビゲーションをどのように処理するかです。

React Navigation は、React の最もよく知られたナビゲーションライブラリの 1 つです。このチュートリアルでは、React Native ナビゲーションの基本を説明し、React Native アプリケーションで React Navigation の使用を開始する方法を示し、いくつかの React Native ナビゲーションの例を説明します。

リアクションナビゲーションとは何ですか？

React Navigation はスタンドアロンライブラリであり、「Windows 11 のブラックスクリーン問題を解決する 8 つの方法」を使用すると、React Native アプリケーションにナビゲーション機能を実装できます。

React Navigation は JavaScript で記述されており、iOS および Android のネイティブナビゲーション API を直接使用しません。代わりに、これらの API の一部のサブセットが再作成されます。これにより、Objective-C、Swift、Java、Kotlin などを学習しなくても、サードパーティの JS プラグインを統合して最大限のカスタマイズと簡単なデバッグが可能になります。

反応ナビゲーション 6.0

この記事の執筆時点で、React Navigation の最も安定したバージョンは、2021 年 8 月にリリースされた React Navigation 6.0 です。リリース投稿によると、最新バージョンは柔軟性と使いやすさに重点を置いています。ただし、チームは、この最新バージョンには大きな変更はほとんどないとも述べています。

React Navigation 6.0 に含まれる新機能には次のようなものがあります。

ナビゲーターの柔軟なカスタマイズオプション: これは、開発者がナビゲーターの外観と操作性をさらに調整できることを意味します。
グループコンポーネント: グループ要素を使用すると、ユーザーはプロジェクト内の画面間で画面のオプションと構成を共有できます。したがって、これにより、より整理され、コードが読みやすくなります。
コンポーネントライブラリ: v6 以降、ナビゲーションチームは要素コンポーネントライブラリを作成しました。これは、ユーザーがカスタムナビゲーターを構築したい場合に便利です。
ネイティブナビゲーション: ライブラリはデフォルトで内部でネイティブスタックを使用するようになりました。これは、古いデバイスでは、大画面間のナビゲーションがより速く、要求が少なくなることを意味します。
Flipper プラグイン: このツールを使用すると、開発者はアプリケーションをデバッグし、パフォーマンスを追跡できます。ファイルエクスプローラーから最近使用したファイルを削除/無効にする方法最新バージョンでは、テストプロセスを容易にする公式の React Navigation プラグインが追加されました。

React Native ナビゲーションとは何ですか?

React Native Navigation は、React Navigation の代替として人気があります。これは React Native に依存し、React Native で使用するように設計されたモジュールです。React Native Navigation は、iOS および Android でネイティブナビゲーション API を直接使用するため、よりネイティブなルックアンドフィールを提供するという点で若干異なります。

React Navigation と React Native Navigation の違いを詳しく調べるには、「 React Navigation と React Native Navigation: どちらが最適ですか? 」を参照してください。

別のオプション: React Router Native

React Router Native は、React Native アプリケーションにナビゲーション機能を実装するためのもう 1 つのソリューションです。最新の Web フレームワークで有名な Remix チームによって開発されました。

API コード React Router Native の大部分を React Router フレームワークと共有します。これは、React Router を使用したことのある Web 開発者が、そのネイティブバージョンを簡単に使い始めることができることを意味します。

使いやすさの点では、React Navigation と React Router Native は同じです。たとえば、次のルーターネイティブコードを見てください。

import { NativeRouter, Route, Link } from "react-router-native"; 
const ホーム = () => <テキスト>ホーム</テキスト>; 
const About = () => <Text>About</Text>; 
const App = () => ( 
  <NativeRouter> 
    <View> 
      <View> 
        {/* リンクを定義します。
  </NativeRouter> 
);

Navigation と比較すると、コードが似ていることがわかります。

import { NavigationContainer } from "@react-navigation/native"; 
import { createNativeStackNavigator } から "@react-navigation/native-stack"; 
function HomeScreen() { 
  return ( 
    <View> 
      <Text>ホーム画面</Text> 
    </View> 
  ); 
} 
function AboutScreen() { 
  return ( 
    <View> 
      <Text>画面について</Text> 
    </View> 
  ); 
const 
Stack = createNativeStackNavigator(); 
import デフォルト関数 App() { 
  return ( 
    <NavigationContainer> 
     <Stack.Navigator>  
        {/*ルートを定義します*/}
        <Stack.
        <Stack.Screen name="概要" コンポーネント={AboutScreen} /> 
      </Stack.Navigator> 
    </NavigationContainer> 
  ); 
}

両方のライブラリでルーティングを実装するために使用されるコードは互いに同一です。これは、両方のフレームワークの学習曲線が短いことを意味するため、大きな利点です。

Web 開発の経験がある場合は、React Router と使用方法が同じである React Router Native をお勧めします。それ以外の場合は、React Navigation が正しい選択となるはずです。興味深いメモ - 貴重なチュートリアルを共有してください。より大きなコミュニティがあるため、より多くの開発サポートを提供できます。

React ナビゲーションをインストールする

Yarn がインストールされていると仮定すると、最初のステップは React Native アプリケーションをセットアップすることです。React Native を始める最も簡単な方法は Expo ツールを使用することです。Expo ツールを使用すると、Xcode や Android Studio をインストールして構成しなくてもプロジェクトを開始できます。

まず、次の bash コマンドを使用して空の Expo アプリケーションを初期化します。

npx create-expo-app ReactNavigationDemo

これにより、ダウンロードプロセスが開始され、プロジェクトが構成されます。

次に、プロジェクトフォルダーに移動し、コードエディターを開きます。

cd ReactNavigationDemo

VS Code を使用している場合は、次のコマンドを使用してエディターで現在のフォルダーを開くことができます。

コード。

次のコマンドを使用してアプリケーションを起動します。

npxエキスポ開始

次のステップでは、react-navigation プロジェクトからライブラリ React Native をインストールします。

npm install @react-navigation/native 
npx expo install 反応ネイティブスクリーン 反応ネイティブセーフエリアコンテキスト

React Native スタックナビゲーター

React Navigation は JavaScript を使用して構築されているため、真のネイティブのような外観と操作性を備えたコンポーネントとナビゲーションパターンを作成できます。

React Navigation は、いわゆるスタックナビゲーターを使用して、アプリケーション内でユーザーがたどるルートに基づいてナビゲーション履歴と対応する画面のレンダリングを管理します。一度にユーザーに表示される画面は 1 つだけです。

紙の束を想像してください。新しい画面に移動すると紙の束が一番上に置かれ、逆に移動すると紙の束が紙束から削除されます。Stack Navigator は、ネイティブの iOS および Android のようなトランジションとジェスチャも提供します。アプリケーションには複数のスタックナビゲータを含めることができることに注意してください。

React Native ナビゲーションの例

このセクションでは、React Native ナビゲーションパターンのいくつかの例と、React Navigation ライブラリを使用してそれらを実装する方法について説明します。

1. スタックナビゲーターを使用して画面コンポーネント間を移動します。

まず、プロジェクトのルートに /components フォルダーを作成しましょう。次に、Homescreen.js と Aboutscreen という 2 つのファイルを作成します。

// Homescreen.js は
「react」から React をインポートします。
import { Button, View, Text } from "react-native"; 
export
デフォルト関数 HomeScreen({ Navigation }) { 
  return ( 
    <View style={ 
  
  { flex: 1, alignItems: "center", justifyContent: "center" } }> 
      <Text>ホーム画面</Text> 
      <Button 
        title="概要に移動" 
        onPress={() => Navigation.navigate("概要")} 
      /> 
    </View> 
  ); 
}

onPress の上のボタンの小道具に注目してください。これが何をするかについては後で説明します。

// Aboutscreen.js 
import React, { Component } from "react"; 
import { Button, View, Text } from "react-native"; 
export デフォルト関数 AboutScreen() { 
  return ( 
    <View style={ 
  
  { flex: 1, alignItems: "center", justifyContent: "center" }}> 
      <Text>画面について</Text> 
    </View> 
  ); 
}

プロジェクトフォルダーは次のようになります。

App.js にもいくつかの変更を加えてみましょう。ここでは、次のインポートを行う必要があります。

// ナビゲーターを実装することを React に伝えます
import { NavigationContainer } from "@react-navigation/native"; 
// スタックナビゲーターを作成します
import { createNativeStackNavigator } from "@react-navigation/native-stack";

App.js からエクスポートされたコンポーネントは React Native アプリケーションのエントリポイント (またはルートコンポーネント) であり、他のすべてのコンポーネントは子孫であるため、ルート App.js ファイルにナビゲーションを実装すると便利です。

ご覧のとおり、他のすべてのコンポーネントをナビゲーション関数でラップします。

// App.js 
import * as React from "react"; 
import { View, Text } from "react-native"; 
import { NavigationContainer } from "@react-navigation/native"; 
import { createNativeStackNavigator } から "@react-navigation/native-stack"; 
ホームスクリーンを「./components/HomeScreen」からインポートします。
"./components/AboutScreen" から AboutScreen をインポートします。

const Stack = createNativeStackNavigator(); 

import デフォルト関数 App() { 
  return ( 
    <NavigationContainer> 
      <Stack.Navigator> 
        <Stack.Screen name="Home" コンポーネント={HomeScreen} /> 
        <Stack. 
      画面名 = "概要" コンポーネント = {AboutScreen} /> </Stack.Navigator> 
  ); 
}

上記のコードでは、createNativeStackNavigator はアプリケーションが画面間を遷移する方法を提供し、新しい画面はそれぞれスタックの最上位に配置されます。使い慣れた iOS および Android のルックアンドフィールを持つように構成されています。新しい画面は iOS では右からスライドインし、Android では下からフェードインします。

ここでは、createNativeStackNavigator 関数を実行し、そのインスタンスを Stack mutable に保存しました。

後で、以下を使用してルートに Stack.Screen タグを渡します。Home ルートは HomeScreen に対応し、About ルートは AboutScreen に対応します。

createStackNavigator 関数はバックグラウンドで渡され、HomeScreen コンポーネントと AboutScreen コンポーネントに移動します。このプロパティにより、指定された画面コンポーネントへのナビゲーションが可能になります。これが、以下に示すように、ボタンを押すと AboutScreen ページが表示されるボタンで HomeScreen.js を使用できる理由です。

<Button title="概要に移動" onPress={() => Navigation.navigate("概要")} />;

App.js コードでは、最後にコンポーネントを NavigationContainer タグでラップすることにより、アプリケーションコンテナーを作成します。このコンテナはナビゲーション状態を管理します。

このアプリケーションを実行するには、Expo クライアントアプリケーションをダウンロードする必要があります。iOS 版と Android 版を入手できます。コマンドラインがプロジェクトフォルダーを指していることを確認し、次のコマンドを実行します。

npxエキスポ開始

端末に QR コードが表示されるはずです。Android の Expo アプリを使用して QR コードをスキャンします。iOS アプリの場合は、通常の iPhone カメラを使用してスキャンできます。コマンドをクリックして Expo アプリを開くよう求められます。

2. タブナビゲーションを使用する

ほとんどのモバイルアプリには複数の画面があります。このようなモバイルアプリケーションの一般的なナビゲーションスタイルは、タブベースのナビゲーションです。ここでは、createBottomTabNavigator 関数の使用方法に焦点を当てます。

タブベースのナビゲーションを実装する前に、まず次のようにボトムタブモジュールをインストールする必要があります。

npm install @react-navigation/bottom-tabs

/components の下に ContactScreen.js ファイルを作成して、アプリケーションに別の画面を追加しましょう。

import React, { Component } from "react"; 
import { Button, View, Text } from "react-native"; 

export デフォルト関数 ContactScreen() { 
  return ( 
    <View style={ 
  
  { flex: 1, alignItems: "center", justifyContent: "center" }}> 
      <Text>連絡先画面</Text> 
    </View> 
  ); 
}

次に、インポートを App.js ファイルの先頭に追加しましょう。

ContactScreen を './components/ContactScreen' からインポートします。

ルート App.js コンポーネントにナビゲーションを実装すると便利であることを思い出してください。したがって、App.js に createBottomTabNavigator をインポートしてタブナビゲーションを実装します。createStackNavigator を次のコード行に置き換えましょう。

import { createBottomTabNavigator } から '@react-navigation/bottom-tabs';

さらに、createBottomTabNavigator 関数を実行します。

const Tab = createBottomTabNavigator(); 

//さらなるコード... 
<NavigationContainer> 
  <Tab.NavigatorInitialRouteName="Home"> 
    <Tab.Screen name="Home" コンポーネント={HomeScreen} /> 
    <Tab.Screen name="About" コンポーネント={AboutScreen} /> 
  </Tab.Navigator> 
</NavigationContainer>;

次のコマンドを使用して、新しい画面 Tab.Screen パーツを追加します。

<Tab.Navigator> 
  <Tab.Screen name="ホーム" コンポーネント={HomeScreen} /> 
  <Tab.Screen name="概要" コンポーネント={AboutScreen} /> 
  <Tab.Screen name="連絡先" コンポーネント={ContactScreen } /> 
</Tab.Navigator>

アプリケーション npm start を実行し、Expo クライアントで開くと、下部のナビゲーションが実装されていることがわかります。

3. ドロワーナビゲーションを使用する

ナビゲーションドロワーの実装をすぐに開始するには、まず必要な依存関係をインストールします。

npm install @react-navigation/drawer 
npx expo install 反応ネイティブジェスチャーハンドラー 反応ネイティブ蘇生

次に、Reanimated のドキュメントに移動して、プロジェクトにジェスチャコントロールを設定します。

この手順を完了したら、次のインポートステートメントを App.js に記述します。

import "react-native-gesture-handler"; //これはコードの最初のインポートである必要があります
import { createDrawerNavigator } from "@react-navigation/drawer";

AppNavigator の変更可能性も更新しましょう。

const Drawer = createDrawerNavigator(); 
<Drawer.NavigatorinitialRouteName="Home"> 
  <Stack.Screen name="Home" コンポーネント={HomeScreen} /> 
  <Stack.Screen name="About" コンポーネント={AboutScreen} /> 
  <Stack.Screen name="Contact " コンポーネント={ContactScreen} /> 
</Drawer.Navigator>

npm start を実行すると、変更がすぐに確認できるはずです。左からスワイプしてナビゲーションドロワーを表示します。

ルート名の横にアイコンを追加して、ナビゲーションドロワーをカスタマイズできます。プロジェクトのアセットフォルダーには、現在 3 つのアイコンがあります。

次の画面コンポーネントファイルに追加することで、navigationOptions をカスタマイズできます。

<NavigationContainer> 
  <Drawer.NavigatorInitialRouteName="Home"> 
    <Drawer.Screen 
      name="Home" 
      component={HomeScreen} 
      options={ 
  
  { //画面のdrawerIconの構成を変更します
        : ({ color,number,focused }) => { //アイコンを設定します: 
          return ( //アイコンは画像になります
            <Image 
              source={require("../assets/home-icon.png")} 
              style={ 
  
  { height: 30, width: 30 }} 
            /> 
          ); 
        }, 
      }} 
    /> 
    <引き出し。
  
  { 
        drawerIcon: ({ color,number,focused }) => { //すべての画面のアイコンを設定
          return ( 
            <Image 
              source={require("../assets/about-icon.png")} 
              style={ 
  
  {高さ: 30、幅: 30 }} 
            /> 
          ); 
        }, 
      }} 
    /> 
    <Drawer.Screen 
      name="Contact"
      コンポーネント={ContactScreen} 
      options={ 
  
  { 
        drawerIcon: ({ color,number,focused }) => { 
          return ( 
            <Image 
              source={require(".. /assets/contact-icon.png")}
              スタイル={
  
  { 高さ: 30、幅: 30 }} 
            /> 
          ); 
        }, 
      }} 
    /> 
  </Drawer.Navigator> 
</NavigationContainer>

drawerActiveTintColorprop を使用すると、ナビゲーションタブとラベルのアクティブまたは非アクティブな状態に基づいて任意の色を適用できます。たとえば、ナビゲーションドロワーのラベルのアクティブ状態の色を変更できます。Drawer.Navigator 変数に移動し、オプションオブジェクトに追加します。

<Drawer.NavigatorInitialRouteName 
  ="Home" 
  screenOptions={ 
  
  {drawerActiveTintColor: "#e91e63" }} 
> 
//... さらなるコード。

これにより、色が変わります。

React Navigation の画面にパラメータを渡す

パラメーターをルートに渡すには、2 つの簡単な手順があります。

パラメーターを 2 番目の引数としてオブジェクトに入れてルートに渡します。

ナビゲーション.ナビゲート

関数：

Navigation.navigate('RouteName', { /* パラメータはここに移動します */ })

画面コンポーネントのパラメータを読み取ります。

デフォルト関数をエクスポートします HomeScreen({ ルート, ナビゲーション }) { 
//
「ルート」変数はページに関する情報を提供します。//
パラメータ
とその値も格納されます
。const
{ paramName } = Route; //パラメータ「paramName」はここに保存されます。
//..さらなる
コード.. 
}

最後に、タイトル title を設定するには、次のように options プロパティの title プロパティを使用します。

<Drawer.Screen 
  name="Home" 
  component={HomeScreen} 
  options={ 
  
  { 
    title: "ホームページ", // ページのタイトルを「ホームページ」に設定します
  }} 
/>

結論は

この記事が、既存または将来の React Native プロジェクトで React Navigation パッケージをすぐに使用するのに役立つことを願っています。

他にもやるべきことはたくさんありますが、React Navigation はほとんどのニーズを満たします。詳細については、React Navigation ドキュメントを参照してください。また、私の GitHub リポジトリから最終コードを自由に取得してください。