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

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

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. React-Navigation とは
  2. バージョン
  3. 実際のコード
  4. アレンジしたい場合
  5. まとめ
オススメ本

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

React-Navigation とは

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

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

バージョン

これを実装したのは、２０１９年１１月２９日時点です。

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
//上と同様。メニュータブがほしい人はこれ。

実際のコード

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

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

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 にご連絡ください。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。