【React Naitevi】ルーディングとナビゲーションを設定するReact Navigationの使い方

【React Naitevi】ルーディングとナビゲーションを設定するReact Navigationの使い方

こんにちは、nishi_talk(@nishi_talk)です。
今回はReact Naiteviでアプリケーションのルーディングとナビゲーションを設定するReact Navigationの使い方をご紹介します。



React NavigationはReact Naiteviでページ遷移を実装することができます。
今回は例として、HOMEページとPROFILEページへ遷移できるようにします。

React Navigation

今回使用するReact Navigationの公式サイトはこちら。
ドキュメントなどは本家を参考にしてください。

React Navigatio

パッケージのインストール

まずは、React Navigationのパッケージをインストールします。

$ npm install --save react-navigation

ファイルの設定

今回設定するReact Nativeのファイル構造です。
App.jsでアプリの自体の設定。
router.jsでアプリのルーティングの設定。
containerフォルダの中にあるのが、ページの大枠を作る。

App.js
package.json
src
├── container
│   ├── HomeScreen.js
│   └── ProfileScreen.js
├── reducers
│   └── index.js
└── router.js

React Nativeの設定

App.jsには以下を記述します。

import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'

import rootReducer from './src/reducers'
import RootStack from './src/router'

const store = createStore(rootReducer)

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <RootStack />
      </Provider>
    )
  }
}

export default App

ルーティングの設定

src/router.jsには以下を記述します。

import React from 'react'
import { createBottomTabNavigator } from 'react-navigation'

import HomeScreen from './container/HomeScreen'
import ProfileScreen from './container/ProfileScreen'

export default createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      showLabel: false,
      showIcon: true
    }
  },
  Profile: ProfileScreen
})

import { createBottomTabNavigator } from 'react-navigation'

createBottomTabNavigatorコンポーネントを使用します。

export default createBottomTabNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      showLabel: false,
      showIcon: true
    }
  },
  Profile: ProfileScreen
})

この部分で、createBottomTabNavigatorの内容を指定します。
Home:でナビゲーションの名前を指定して、最初の画面を表示する画面を指定します。
navigationOptionsでナビゲーション部分のオプションを指定します。
その他のオプションの指定方法はドキュメントを見てください。

createBottomTabNavigator



各ページを作成

containerフォルダにHomeScreenとProfileScreenを作成して、以下を記述します。

src/container/HomeScreen.js

import React from 'react'
import { View, Text } from 'react-native'

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={styles.textContainer}>
        <Text style={styles.text}>HOME</Text>
      </View>
    )
  }
}

const styles = {
  text: {
    fontSize: 24
  },
  textContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    backgroundColor: '#dddddd'
  }
}

export default HomeScreen

src/container/ProfileScreen.js

import React from 'react'
import { View, Text } from 'react-native'

class ProfileScreen extends React.Component {
  render() {
    return (
      <View style={styles.textContainer}>
        <Text style={styles.text}>Profile page</Text>
      </View>
    )
  }
}

const styles = {
  text: {
    fontSize: 24
  },
  textContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    backgroundColor: '#dddddd'
  }
}

export default ProfileScreen

reducersを作成

今回は特に意味を持たないので、ダミーの記述をしてます。

src/reducers/index.jsに以下の記述をします。

import { combineReducers } from 'redux'

export default combineReducers({
  sample: () => []
})

未経験からでもエンジニアにはなれる!

中堅の年代になり、最近よくどうやってエンジニアになったんですか?と聞かれる機会が多くなりました。私は転職組で未経験からエンジニアになりました。 そこら辺のストーリーは「未経験からWebデザイナーになった経緯を紹介」で書いているのでそちらをご覧ください。

当時はWebの技術を教えてくれるスクールがあまりなく、私はWebの勉強は独学で勉強し転職したのですが、今はスクールの数も多くなっていてオンラインで受講できるところも増えてきました。

もし私が未経験でエンジニアを目指すなら活用したいスクールを紹介してますので興味ある方はぜひ参考にしてくだいさい!

tech boostオンライン

tech boostはエンジニアに特化したキャリアサービスを展開しているBranding Engineerが運営するオンラインプログラミングスクールです。

エンジニアに特化したキャリアサービスを展開しているからこそのカリキュラムを実現しています。 また、転職サポート付きでスクール卒業後もキャリアも安心です。

オンラインスクールだからいつでもどこでも受講可能!これからプログラミングを学びたい方、エンジニアにキャリアチェンジを考えている方に、 特にオススメのサービスです。

初めてプログラミングを学ぶなら「tech boostオンライン」

CodeCamp(コードキャンプ)

オンライン・マンツーマン指導のプログラミングスクールとしてNo.1*の実績を持つサービスです。高い学習効果が評価されテレビや新聞、ビジネス誌など*多くのメディアで紹介されています。

講師は全て現役のエンジニア。未経験から確実に習得するために開発されたオリジナルカリキュラムでWebデザイン、Webサービス開発、アプリ開発などを幅広く学習することができます。

多くの受講生が、現役エンジニアの手厚いマンツーマン指導によって確実にプログラミングを習得し、キャリアアップ・転職・独立起業などの目標を実現しています。

プログラミングのオンラインスクールのCodeCamp

DMM WEBCAMP

転職を本気で考えている方向けのプログラミングスクールです。転職を保証しているため、未経験からIT業界へ転職を求めている方へおすすめです!

プログラミング未経験者でも安心のサポート体制をご用意しており、特に受講者アンケートでは『サポート体制がしっかりしていて魅力的』、『転職を保証していただいていることで安心』というレビーが多くしっかとしたサポートを提供しています。

実務に近い実践的なカリキュラムで、DMM WEBCAMPはチーム開発など、実務により近い実践的カリキュラムを導入しているため、転職先・就職後にいち早く活躍できるスキル・経験を積むことができます。

受講者満足度90%以上のプログラミングスクール【DMM WEBCAMP】

Udemy

私の周りの現役のエンジニアの人も活用しています。基礎をしっかり固めたい方や、実践向けの配信など幅広く解説している動画が豊富にアップされているので活用するのはオススメです。

習得したいスキル(プログラム言語)が明確で、年収アップのために学習している方やAI・機械学習を学んでスキルアップを目指しているエンジニアの方に支持されているます。

1講座あたり数千~数万円程度で実践的なスキルアップを経済的でオススメです。

【Web開発初心者向け!】Web開発入門完全攻略 充実の18時間コース