ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

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

たった今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 }
    },
    {}
  )
);
react-native-image

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

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

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

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

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

アレンジしたい場合

navigationOption: { headerTitle: 'Mr&MrsSnapshot' }

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

などを追記すると様々なアレンジをすることができます。 これはぜひ公式を見ながら自分のナビゲーションを作って見てください! https://reactnavigation.org/docs/en/tab-based-navigation.html  

自分もそうなのですが、形が決まっているコードの書く場所が分かりにくかったりするので、長くなってしまいますが、 一応サンプルとして自分のコードを置いておこうと思います!ぜひ参考にしてください。

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'
      } //以下メニュー
    }
  )
);