android - React-Native-Router-Flux を使用した React Native のネストされたシーン

Question

React-Native-Router-Flux (V. 3.37) を使用して Android アプリをビルドしており、ネストされたシーンを作成しようとしています。DefaultRenderer 要素を使用して、ネストされた単一のシーンを作成できましたが、複数あり、それらをナビゲートできるようにしたいと考えています。

私の index.android.js は次のようになります (ルーターとシーンの key="root" 要素内)。

<Scene
   key="outer"
   component={Outer}
   title="Outer"
   initial
   hideNavBar
 >
    <Scene
      key="inner1"
      component={Inner1}
      title="Inner1"
      hideNavBar
    />
    <Scene
      key="inner2"
      component={Inner2}
      title="Inner2"
      hideNavBar
     />
</Scene>

外側のコンポーネントは次のようなものです。

<View style={styles.container}>
   <View style={styles.smallContainer}>
      <DefaultRenderer 
         navigationState={this.props.children[0]}
         onNavigate={this.props.onNavigate}
      />
   </View>
</View>

このように、Inner1 コンポーネントは、Outer コンポーネントの smallContainer ビュー内に適切にネストされます。しかし、Inner2 に移動する方法がわかりません。this.props.children[1] を navigationState として単純にハードコーディングすると、「navigationState と onNavigate プロパティは null であってはなりません」と通知されます。

onPress={Actions.inner2} を使用して Inner1 に TouchableHighlight を配置すると、単に何もしません。

私の本能は、答えは Outer コンポーネントの DefaultRenderer 要素内の onNavigate={this.props.onNavigate} 属性にあると教えてくれますが、それに関する情報を見つけることができませんでした。React-Native-Router-Flux のサンプル ドキュメントの奥深くから DefaultRenderer 要素をコピーしました。

React-Native-Simple-Router、React-Native-Router、React-Router-Native も調べましたが、明らかに優れているものはありませんでした。