React Native-ルーター

この章では、React Nativeのナビゲーションを理解します。

ステップ1：ルーターをインストールする

まず、 Router をインストールする必要があります。この章では、React Native Router Fluxを使用します。プロジェクトフォルダーからターミナルで次のコマンドを実行できます。

npm i react-native-router-flux --save

ステップ2：アプリケーション全体

ルーターにアプリケーション全体を処理させるため、 index.ios.js に追加します。 Androidの場合、 index.android.js でも同じことができます。

App.js

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import Routes from './Routes.js'

class reactTutorialApp extends Component {
   render() {
      return (
         <Routes/>
      )
   }
}
export default reactTutorialApp
AppRegistry.registerComponent('reactTutorialApp', () => reactTutorialApp)

ステップ3：ルーターを追加する

ここで、コンポーネントフォルダー内に Routes コンポーネントを作成します。いくつかのシーンを持つ Router を返します。各シーンには key、component および title が必要です。ルーターはキープロパティを使用してシーンを切り替え、コンポーネントが画面にレンダリングされ、タイトルがナビゲーションバーに表示されます。また、 initial プロパティを、最初にレンダリングされるシーンに設定することもできます。

Routes.js

import React from 'react'
import { Router, Scene } from 'react-native-router-flux'
import Home from './Home.js'
import About from './About.js'

const Routes = () => (
   <Router>
      <Scene key = "root">
         <Scene key = "home" component = {Home} title = "Home" initial = {true}/>
         <Scene key = "about" component = {About} title = "About"/>
      </Scene>
   </Router>
)
export default Routes

ステップ4：コンポーネントを作成する

前の章の Home コンポーネントが既にあります。ここで、 About コンポーネントを追加する必要があります。 goToAbout および goToHome 関数を追加して、シーンを切り替えます。

Home.js

import React from 'react'
import { TouchableOpacity, Text } from 'react-native';
import { Actions } from 'react-native-router-flux';

const Home = () => {
   const goToAbout = () => {
      Actions.about()
   }
   return (
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToAbout}>
         <Text>This is HOME!</Text>
      </TouchableOpacity>
   )
}
export default Home

About.js

import React from 'react'
import { TouchableOpacity, Text } from 'react-native'
import { Actions } from 'react-native-router-flux'

const About = () => {
   const goToHome = () => {
      Actions.home()
   }
   return (
      <TouchableOpacity style = {{ margin: 128 }} onPress = {goToHome}>
         <Text>This is ABOUT</Text>
      </TouchableOpacity>
   )
}
export default About

アプリは最初の*ホーム*画面をレンダリングします。

React Native Router

ボタンを押すと、About画面に切り替えることができます。戻る矢印が表示されます。それを使用して前の画面に戻ることができます。