I am mitsuruog | react-native-router-fluxのonRightをカスタマイズする

react-native-router-flux で毎日頭を悩ませています。うーん、なんだろう。。。初見は使いやすそうなんですが、いざ本番となるといろいろ制約があって悩ましいライブラリですね。

Part2 react-native-router-flux の onRight をカスタマイズする(part2) | I am mitsuruog

今回はアプリの NavBar の右側にあるボタンをクリックした時に、次の画面に props を渡したいようなユースケースを想定しています。例えば参照画面から編集画面に移動するときなどです。ボタンは次のイメージのような感じです。

この時 react-native-router-flux はonRightを発火するのですが、これに動的に値を渡すために少し工夫が必要でした。

通常の onRight の定義方法

「プロフィール」と「プロフィール編集」ページを想像してみましょう。「プロフィール」ページの編集ボタンをクリックすると「プロフィール編集」ページに移動します。この時、react-native-router-flux のActionsにプロフィール ID を渡して次の画面で利用できるようにしたいです。

次のコードは通常のRouter設定です。 onRightはSceneと一緒に定義してあり、期待通り「プロフィール編集」しますが、プロフィール ID を値を渡すことはできません。

// AppRoute.tsx
  ...
  <Scene
    key="page_profile"
    component={Profile}
    title="プロフィール"
    onRight={() => Actions.page_profile_edit()}
    rightTitle="Edit"
  />
  <Scene
    key="page_profile_edit"
    component={ProfileEdit}
    title="プロフィール編集"
  />
  ...

onRight を Component の中で定義する

onRightにプロフィール ID を渡すためには、「プロフィール」ページの中でonRightハンドラを上書きして、ID を渡せるようにしなければなりません。 onRightは props で渡されてくるnavigation.setParams()にて置き換えできるので、componentWillMountでコンポーネントが Mount された時に上書きしましょう。

// Profile.tsx
export Profile extends React.Component<ProfileProps, {}> {
  componentWillMount() {
    this.props.navigation.setParams({
      'onRight': this.onRight,
    });
  }
  private onRight = () => {
    console.log('Press onRight!!');
    // ここでActionsにプロフィールIDを渡す
    Actions.page_profile_edit({ profileId: 1 });
  }}
  ...
}

Router の方のonRightは動かないようにしておきます。

// AppRoute.tsx
  ...
  <Scene
    key="page_profile"
    component={Profile}
    title="プロフィール"
-    onRight={() => Actions.page_profile_edit()}
+    onRight={() => undefined}
    rightTitle="Edit"
  />
  ...

TypeScript で型付けする場合は@types/react-navigationのNavigationScreenPropを使います。

// Profile.tsx
import { NavigationScreenProp } from 'react-navigation';

interface ProfileProps {
  navigation: NavigationScreenProp<any, any>;
}

export Profile extends React.Component<ProfileProps, {}> {
  componentWillMount() {
    this.props.navigation.setParams({
      'onRight': this.onRight,
    });
  }
  ...
}

これでonRightをカスタマイズすることができました。

。。。大変。

以上