ReactNative-ルーター

この章では、ReactNativeでのナビゲーションについて理解します。

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

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

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。ルーターはkeyプロパティを使用してシーンを切り替え、コンポーネントが画面にレンダリングされ、タイトルがナビゲーションバーに表示されます。設定することもできます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

アプリはイニシャルをレンダリングします Home 画面。

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