ReactNative 最小構成の画面遷移

React Native を使って0からアプリ開発をしています。
前回の kentear.hatenablog.com の続きとなっています！

今回は、おそらく最小構成の画面遷移を実装してみました。

やること

Listに表示されているItemをタップしたら、その詳細画面に遷移するようにします。

現在のファイル構成

以下の様になっています。＊必要なところだけ抜粋

|- App
| |- components
|   |- home.js
|   |- lessonListItem.js
|- App.js
|- index.ios.js

今回使用するライブラリ

react-native-router-flux を使用します。

$ yarn add --save react-native-router-flux でインストールしました。
＊npmの人は $ npm i - S react-native-router-fluxで。

react-native-router-fluxの特徴

Sceneというものを積み上げるイメージ
web開発でのルーティングファイルの様に一箇所にまとめられる

この辺りが今回の仕様と自分のレベル感にあってるなと思いました。
今後reduxなどを導入する可能性もありますが、共存している方のブログなどを拝見したので問題ないと判断しました。

仕組み

まずApp.jsに以下の様にSceneをいくつか記述します。

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Home from './App/components/home';
import LessonDetail from './App/components/lessonDetail';

export default class App extends Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="home" component={Home} title="Home" initial />
          <Scene key="LessonDetail" component={LessonDetail} title="LessonDetail" />
        </Scene>
      </Router>
    )
  }
}

module.export = App;

このApp.jsのSceneに対して、どこか画面遷移をしたいタイミングで

Actions.LessonDetail //LessonDetailがApp.jsのkeyに対応

というメソッドを実行します。
これだけで画面遷移が実現できます。

画面が増える場合はSceneを増やせば良いだけです。

実際のコード

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';

import App from './App';

export default class Rep extends Component {
  render() {
    return(
      <App />      
    )
  }
}

AppRegistry.registerComponent('Rep', () => Rep);

App.jsは上記のままですが、そもそもApp.jsを呼び出しているのはここになります。

lessonListItem.js

これはListの各項目のcomponentです。

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import {
    Actions,
} from 'react-native-router-flux';
import LessonDetail from './lessonDetail';

export default class LessonListItem extends Component {

  constructor(props) {
    super(props)
  }

  _clickItem(item) {
    console.log(item);
    Actions.LessonDetail // ここで画面遷移を呼び出しています。
  }

  render() {
    let item = this.props.item;
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={(item) => Actions.LessonDetail(this.props.item)}>
          <View style={styles.listBlock}>
            <Text style={styles.listItem}>{ item.lesson_name }</Text>
            <Text style={styles.listItem}>{ item.professor_name }</Text>
          </View>
        </TouchableOpacity>
      </View>
    )
  }
}

// Styleは省略

module.export = LessonListItem;

最後に

段々とReact Nativeに慣れてきました。
今回始めて大元のReact以外のライブラリを使用しましたが、インストールも利用するのも割とすんなりいきました。
まだ画面数は多くないので、 react-native-router-flux を中心とした設計にしようと思います。

sugiken のメモ帳

知ったことを書いていく