React入門

【React Navigation】 Nativeアプリにナビゲーション導入

【React Navigation】 Nativeアプリにナビゲーション導入

本記事は、React Nativeの環境構築が完了している方を対象としています。

完了していない方は下記の記事を参考に構築してみてください。

【入門】ReactNative+Expo環境構築|firebaseとの連携も解説

概要

React Navigationとは何なのか。→React Nativeアプリの中で簡単にナビゲーション機能を導入することができるライブラリです。
Webアプリと違い、iOS・AndroidアプリではURLでの画面推移はできません。

そのため、React Nativeでは画面推移=ナビゲーションを使って利用するのです。

ポイント:React Native界隈では「どのライブラリを使用してナビゲーションを実装すべきなのか」について議論されています。
有名なライブラリとしてReact-Native-navigationやReact-Native-router-fluxなどがありますが、2021年時点では公式のリファレンスで「ナビゲーションはReact Navigationが良いよ」と公表しているので、これから始める方は本記事で紹介している内容を理解すれば問題なしです。

おにちゃん
おにちゃん

本記事ではReact Nativeプロジェクトを既に作成済みで話を進めていきます。

プロジェクト作成方法について知りたい方は下記の記事を参考にしてみてください。

React Navigation V5をインストール

React Navigation V5をインストール

React Navigation V5をインストール

2021年時点ではReact Navigation v5が最新バージョンになっています。

v5のインストールのコマンドには下記のコマンドを入力する必要があります。

npm install –save @react-navigation/native

React Navigation v5がインストールできた方は、v5を正常に使うために必要なライブラリをインストールしていきましょう。

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

おにちゃん
おにちゃん

これで土台となるらReact Navigationのインストールは完了です。ここからは使いたいナビゲーション機能を追加していきましょう。

 

React Navigation【自由に追加可能】

React Navigation【自由に追加可能】

React Navigation【自由に追加可能】

React Navigationで追加可能な機能は下記の5つです。

  1. Stack Navigation
  2. Bottom Tab Navigation
  3. Drawer Navigation
  4. Material Top Tab Navigation
  5. Material Bottom Tab Navigation

1つ1つ詳しく解説していきます。

 

Stack Navigation

Stack Navigationとは下記のようなものです。

Stack Navigationのインストールコマンドが下記の通りです。

npm install –save @react-navigation/stack

 

Bottom Tab Navigation

Bottom Tab Navigationとは下記のようなものです。

Twitterのような機能を実装することができます。

npm install –save @react-navigation/bottom-tabs

 

Drawer Navigation

Drawer Navigationとは下記のようなものです。

最近はあまり見ませんが、用途によっては使える機能です。

npm install –save @react-navigation/drawer

 

Material Top Tab Navigation

Material Top Tab Navigationとは下記のようなものです。

これまたスマートニュースのような機能です

npm install –save @react-navigation/material-top-tabs react-native-tab-view

 

Material Bottom Tab Navigation

Material Bottom Tab Navigationとは下記のようなものです。

npm install –save @react-navigation/material-bottom-tabs react-native-paper

 

React Navigationの使い方

React Navigationの使い方

React Navigationの使い方

今回紹介した5つの機能を実際に実装していきましょう。

おにちゃん
おにちゃん

現在、Stack Navigationのみを解説しています。

 

Stack Navigation

Stack Navigationを実装するために下記のファイルを作成してください。

  • App.js(デフォルト)
  • HomeScreen.js
  • DetailsScreen.js
  • Style.js

注意点:HomeScreen.jsとDetailsScreen.jsはcomponentsフォルダ内に収納しています

//App.js

import React from 'react';
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import {HomeScreen} from './components/HomeScreen';
import {DetailsScreen} from './components/DetailsScreen';

const Stack = createStackNavigator();

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

 

HomeScreen.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import styles from '../style';
import {Text, View, Button } from 'react-native';

export function HomeScreen (props) {
  return (
    <View style={styles.container}>
      <Text style={styles.top_message}>おにちゃん塾のReact Nativeへようこそ</Text>
      <Button 
      title="Details Navigation"
      onPress={() => props.navigation.navigate("Details")}
      />
      <StatusBar style="auto" />
    </View>
  );
}

 

DetailsScreen.js
import React from 'react';
import styles from '../style';
import {Text, View, Button } from 'react-native';

export function DetailsScreen () {
  return (
    <View style={styles.container}>
      <Text>詳しい内容はこちらになります。</Text>
    </View>
  );
}

 

Style.js
import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  top_message: {
    fontSize: 12,
    color: 'red',
  }
});

export default styles

 

まとめ:React Navigationは必須機能

まとめ:React Navigationは必須機能

まとめ:React Navigationは必須機能

ここまでが【React Navigation】 Nativeアプリにナビゲーションを導入しよう【超簡単】についての解説でした。

おにちゃん
おにちゃん

本記事は以上です。

 

読者におすすめの記事

【ReactNative編】Webviewを使ってメディアアプリを作ろう
【ReactNative編】Webviewを使ってメディアアプリを作ろうWebviewコンポーネントを活用してアプリ開発してみませんか。本記事を活用すればニュースアプリなどの開発が可能です。...
【デザイン】ReactNative Elementsで今風UIを構築してみよう
【デザイン】ReactNative Elementsで今風UIを構築してみようReact Native ElementsでカッコよいUIを構築する方法について詳しく解説しています。2021年はマテリアルデザインを意識すべし...
【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説
【基礎入門】ReactNativeとは?環境構築からメモアプリまでを解説ReactNativeとはアプリ開発用のフレームワークです。本記事では基礎入門としてReactNativeの環境構築〜メモアプリまでを解説しています。...
ABOUT ME
アバター
鬼澤龍平(20)
Twitterにて役立つ情報を掲載しております。
関連記事