React

【簡単にテンプレで実装】react-navigationを導入してみた

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

React-Native の expo で React-Navigation を導入した方法についてまとめました。

React-Navigation とは

Header や、メニュータブ、戻るボタンとかを爆速で実装できて、ページをプレスで掘り進む際にスライドのアニメーションを簡単につけることができます。

ナビゲーション系のライブラリは絶対に使うレベルなのかな?と思いますので、備忘録がわりに記事を作ります。

バージョン

これを実装したのは、2019年11月29日時点です。

React-Native はライブラリ含めるととてつもない更新頻度なので、version の確認お願いします。

$ expo --version
3.4.1
React-Navigation version 4.x

インストール

インストールするものは多いです。

npm install react-navigation
//今回使用するやつ

npm install react-navigation-stack
/過去バージョンでは一体化していたものが、分別されたので忘れずにインストールしてください

npm install react-navigation-tabs
//上と同様。メニュータブがほしい人はこれ。

実際のコード

上記3つをインポートして使います。

使い方は、公式ページを参考にして・・・

App.js;

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";

import HomeScreen from "./src/screens/HomeScreen";
import ContentScreen from "./src/screens/ContentScreen";
import MyPageScreen from "./src/screens/MyPageScreen";

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Content: { screen: ContentScreen }, // navigationOption: { headerTitle: 'Mr&MrsSnapshot' }
});

const SettingsStack = createStackNavigator({
  MyPage: { screen: MyPageScreen },
});

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: { screen: HomeStack },
      Settings: { screen: SettingsStack },
    },
    {}
  )
);

image14

 コードとディレクトリ構成を見ていただければ予想はつくと思います。

タブにそれぞれ const で名前をつけて、それぞれ遷移させたいページ、階層をもたせたいページを書いていきます。

タブの数が増えれば export default 内の項目が増えますし、

階層を増やす場合は、createStackNavigator 内の項目が増えていきます。

一度設定してしまえば本当に楽チンです!!

アレンジしたい場合

navigationOption: {
  headerTitle: "Mr&MrsSnapshot";
}

tabBarOptions: { activeTintColor: 'tomato', inactiveTintColor: 'gray', }

などを追記すると様々なアレンジをすることができます。

これはぜひ公式を見ながら自分のナビゲーションを作って見てください!

公式ページのこの辺り

以降、僕のコードです。ぜひ参考にしてください。

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";

import HomeScreen from "./src/screens/HomeScreen";
import ContentScreen from "./src/screens/ContentScreen";
import MyPageScreen from "./src/screens/MyPageScreen";

const HomeStack = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Content: { screen: ContentScreen }, // navigationOption: { headerTitle: 'Mr&MrsSnapshot' }
  },
  {
    defaultNavigationOptions: {
      headerTitle: "Mr&MrsSnapshot",
      headerTintColor: "black",
    },
  }
);

const SettingsStack = createStackNavigator(
  {
    // Home: { screen: HomeScreen },
    MyPage: { screen: MyPageScreen },
  },
  {
    defaultNavigationOptions: {
      headerTitle: "Mr&MrsSnapshot",
      headerTintColor: "black",
    },
  }
);

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: { screen: HomeStack },
      Settings: { screen: SettingsStack },
    },
    {
      // You can return any component that you like here!
      //ここまでヘッダーとか

      tabBarOptions: {
        activeTintColor: "tomato",
        inactiveTintColor: "gray",
      }, //以下メニュー
    }
  )
);

まとめ

以上です。

ReactNativeNavigation についてまとめてみました。

誰かの参考になればと思います。

感想・苦情は TwitterDM にご連絡ください。