おにちゃん塾の商品一覧

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

【React Navigation】 Nativeアプリにナビゲーション導入
URLをコピーする
URLをコピーしました!

本記事は、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つです。

  • Stack Navigation
  • Bottom Tab Navigation
  • Drawer Navigation
  • Material Top Tab Navigation
  • 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アプリにナビゲーションを導入しよう【超簡単】についての解説でした。

おにちゃん

本記事は以上です。

読者におすすめの記事

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる