ReactNativeで画面遷移するならNavigatorを使う

2016/05/08

※Android寄りの内容

画面遷移は何かしらのGUIアプリを作る上で欠かせない。

『◯◯を押したら、詳細画面へ遷移する』とか…
『ユーザが◯◯な状態になったら、ベータ版の新機能を紹介する画面へ遷移する』とか…
『バックボタン押したら、前の画面に遷移する』とか…

いろんな場面で使う。

AndroidではstartActivityで遷移先のクラス情報を含んだIntentを投げる。
iOSではStoryboardとか使ってイイカンジにやってる。しらんけど。

ReactNativeではNavigatorというコンポーネントを使って画面遷移を実現する。

NavigatorのドキュメントやNavigatorの解説記事を読めば終わりだけど、使ったメモを書いておく。

Navigatorに対してrouteオブジェクトなるモノを与えることで画面遷移処理が実行される。
routeオブジェクトなんて仰々しく名前ついてるけど単なるオブジェクトです。

Navigatorはrouteオブジェクトを受け取ると、renderSceneを呼ぶ。
このrenderSceneの中でどんなコンポーネントを表示するかというハンドリングを行うわけ。

Contents

1 ListView上のあるアイテムをタップしたら詳細画面へ遷移する(素朴なやり方）
2 Androidでバックボタン押したら前に表示してた画面へ遷移する
3 ListView上のあるアイテムをタップしたら詳細画面へ遷移する(少しスマートなやり方）
4 Navigatorの拡張ライブラリ

ListView上のあるアイテムをタップしたら詳細画面へ遷移する(素朴なやり方）

頻出ケースですね。

こんな感じ。

ルートとなるコンポーネントでNavigatorを描画する。
renderSceneで描画するコンポーネントを素朴に場合分け。(ここ画面増えてきたらカオスになるよね)
各コンポーネント内からnavigatorの処理を呼び出せるようにプロパティとして渡しておく。

class ReactAwesome extends React.Component {
  render() {
    return (
      <Navigator
        initialRoute={{ name: 'List' }}
        renderScene={this.renderScene}
      />
    );
  }

  renderScene(route, navigator) {
    if (route.name === 'List') {
      return <ClipsList navigator={navigator} />
    }
    if (route.name == 'Detail') {
      return <ClipsDetail navigator={navigator} clip={route.clip}/>
    }
  }
}

class ReactAwesome extends React.Component {

render() {

return (

<Navigator

initialRoute={{ name: 'List' }}

renderScene={this.renderScene}

);

}

renderScene(route, navigator) {

if (route.name === 'List') {

return <ClipsList navigator={navigator} />

}

if (route.name == 'Detail') {

return <ClipsDetail navigator={navigator} clip={route.clip}/>

}

ClipsList(ListViewを描画するコンポーネント)の一部を抜粋。
描画する各アイテム全体をタップ対象としたいので、ルートにTouchableHighlightを置く。
onPressで_navigateDetailに処理を委譲する。
プロパティのNavigatorにルートオブジェクトをpushしてるだけ。
これでrenderSceneが呼び出されて、ClipsDetailが描画される。

render() {
    return (
      <ListView
        contentContainerStyle={styles.list}
        dataSource={this.state.items}
        renderRow={this.renderItem.bind(this)}/>
    );
  }

  renderItem(item, sectionId, rowId) {
    return (
      <TouchableHighlight onPress={() => this._navigateDetail(item)}>
        <View style={styles.container}>
          <Image
            source={{uri: item.photo}}
            style={styles.image}/>
          <View style={styles.textContainer}>
            <Text>{item.brand.name}</Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  }

  _navigateDetail(item) {
    this.props.navigator.push({
      name: 'Detail',
      clip: item,
    });
  }

render() {

return (

<ListView

contentContainerStyle={styles.list}

dataSource={this.state.items}

renderRow={this.renderItem.bind(this)}/>

);

}

renderItem(item, sectionId, rowId) {

return (

<TouchableHighlight onPress={() => this._navigateDetail(item)}>

<Image

source={{uri: item.photo}}

style={styles.image}/>

<Text>{item.brand.name}</Text>

</View>

</TouchableHighlight>

);

}

_navigateDetail(item) {

this.props.navigator.push({

name: 'Detail',

clip: item,

});

}

Androidの場合、バックボタン押したら前の画面、上の例だとListに戻ってほしい。
が、戻ることなく、アプリが閉じる。。

Androidでバックボタン押したら前に表示してた画面へ遷移する

BackAndroidというコンポーネントを使って画面のスタックを操作する。
先述したNavigatorを描画するコンポーネント上でバックボタンのハンドリングをやってみる。

class ReactAwesome extends React.Component {

  componentDidMount() {    
    BackAndroid.addEventListener('hardwareBackPress', this._backButtonHandler.bind(this));
  }

  componentWillUnmount() {
    BackAndroid.removeEventListener('hardwareBackPress');
  }

  render() {
    return (
      <Navigator
        ref="navigator"
        initialRoute={{ name: 'List' }}
        renderScene={this.renderScene}
      />
    );
  }

  renderScene(route, navigator) {
    if (route.name === 'List') {
      return <ClipsList navigator={navigator} query='page=1'/>
    }
    if (route.name == 'Detail') {
      return <ClipsDetail navigator={navigator} clip={route.clip}/>
    }
  }

  _backButtonHandler() {
    var navigator = this.refs.navigator;
    if (navigator && navigator.getCurrentRoutes().length > 1) {
         navigator.pop();
         return true;
    }
    return false;
  }
}

class ReactAwesome extends React.Component {

componentDidMount() {

BackAndroid.addEventListener('hardwareBackPress', this._backButtonHandler.bind(this));

}

componentWillUnmount() {

BackAndroid.removeEventListener('hardwareBackPress');

}

render() {

return (

<Navigator

ref="navigator"

initialRoute={{ name: 'List' }}

renderScene={this.renderScene}

);

}

renderScene(route, navigator) {

if (route.name === 'List') {

return <ClipsList navigator={navigator} query='page=1'/>

}

if (route.name == 'Detail') {

return <ClipsDetail navigator={navigator} clip={route.clip}/>

}

_backButtonHandler() {

var navigator = this.refs.navigator;

if (navigator && navigator.getCurrentRoutes().length > 1) {

navigator.pop();

return true;

}

return false;

}

ライフサイクルに合わせてBackAndroidにリスナーをつけたり、消したりしてる。
下記の実装例では、グローバルな空間でBackAndroidへリスナーをつけて終わり。って感じだ。

https://github.com/iSimar/HackerNews-React-Native/blob/master/index.android.js

それからBackAndroidのハンドラ、上の例でいうところの_backButtonHandler内で自身のNavigatorを操作するためにrefで関連付けておく必要がある。
ここ、他に良い方法ないのかね。。

ListView上のあるアイテムをタップしたら詳細画面へ遷移する(少しスマートなやり方）

renderSceneの中でifだとswitchだの使って表示すべきコンポーネントを選択する、っていう素朴なやり方だと画面が増えてきたときに条件判定にまみれて困る。
条件判定を廃したやり方をメモしておく。

renderSceneを下記のように変更する。

  renderScene(route, navigator) {
    let RouteComponent = route.component
    return <RouteComponent navigator={navigator} {...route.passProps} />
  }

renderScene(route, navigator) {

let RouteComponent = route.component

return <RouteComponent navigator={navigator} {...route.passProps} />

}

routeオブジェクトに表示すべきコンポーネントの情報を突っ込んで、それを描画するって感じ。
これだとpushする側で適当なコンポーネントを詰めておけばいいのでrenderScene側で条件判定する必要ない。

pushする側のコード例は下記のとおり。

// push時に渡すコンポーネントは予めインポートしておくこと。
import ClipsDetail from './ClipsDetail';

// blah blah blah...

  _navigateDetail(item) {
    this.props.navigator.push({
      component: ClipsDetail,
      passProps: {
        clip: item,
      }
    });
  }

// push時に渡すコンポーネントは予めインポートしておくこと。

import ClipsDetail from './ClipsDetail';

// blah blah blah...

_navigateDetail(item) {

this.props.navigator.push({

component: ClipsDetail,

passProps: {

clip: item,

}

});

}

passPropsの中で定義したkey-valは、renderSceneの

return <RouteComponent navigator={navigator} {...route.passProps} />

1	return <RouteComponent navigator={navigator} {...route.passProps} />

...によって展開されて渡される。
なので、描画されてるコンポーネント内でpassPropsの存在は気にしなくて良い。普通にthis.props.clipとかイケる。
詳細はSpread Attributeを読めばOK。

Navigatorの拡張ライブラリ

exponentjs/ex-navigator

- ReactNative

: NavigatorExperimentalの実装例を雑に読む

こん …

: DrawerLayoutAndroidとNavigatorを組み合わせて使いたい

Dr …

PREV: gyp: /Users/awesome/.node-gyp/4.0.0/common.gypi not foundのようなエラー対処
NEXT: DrawerLayoutAndroidとNavigatorを組み合わせて使いたい

ReactNativeで画面遷移するならNavigatorを使う

ListView上のあるアイテムをタップしたら詳細画面へ遷移する(素朴なやり方）

Androidでバックボタン押したら前に表示してた画面へ遷移する

ListView上のあるアイテムをタップしたら詳細画面へ遷移する(少しスマートなやり方）

Navigatorの拡張ライブラリ

336px

336px

関連記事

NavigatorExperimentalの実装例を雑に読む

DrawerLayoutAndroidとNavigatorを組み合わせて使いたい