Nested Scenes in React Native with React

I'm using React-Native-Router-Flux (V. 3.37) to build an Android app and I'm trying to create nested scenes. Using the DefaultRenderer element I have been able to create a single nested scene, but I'd like there to be multiple and to be able to navigate through them.

My index.android.js looks something like this (within a Router and Scene key="root" element).

<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>

The Outer component is something like this:

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

Like this the Inner1 component will be properly nested within the smallContainer view in the Outer component. But I have no clue how to navigate to Inner2. If I simply hard code this.props.children[1] as the navigationState, it tells me "navigationState and onNavigate property should be not null."

If I put a TouchableHighlight in Inner1 with onPress={Actions.inner2}, it simply does nothing.

My instinct tells me that the answer lies with the onNavigate={this.props.onNavigate} attribute within the DefaultRenderer element in the Outer component, but I've been unable to find any information about that. I just copied the DefaultRenderer element from deep inside the example docs of React-Native-Router-Flux.

I've also looked into React-Native-Simple-Router, React-Native-Router, and React-Router-Native, but none of them were clearly any better.

链接地址: http://www.djcxy.com/p/52132.html

上一篇: 持续导航反应

下一篇: React Native中的嵌套场景