React Native中的嵌套场景与React-Native-Router-Flux

Question

我正在使用React-Native-Router-Flux(V.3.37)来构建Android应用程序,我正在尝试创建嵌套场景.使用DefaultRenderer元素我已经能够创建一个嵌套的场景,但我希望它有多个并且能够在它们中导航.

我的index.android.js看起来像这样(在Router和Scene 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".

如果我在Inner1中使用onPress = {Actions.inner2}放置TouchableHighlight,它就什么都不做.

我的直觉告诉我,答案在于Outer组件中DefaultRenderer元素中的onNavigate = {this.props.onNavigate}属性,但我一直无法找到有关它的任何信息.我刚刚从React-Native-Router-Flux的示例文档中深入复制了DefaultRenderer元素.

我还研究了React-Native-Simple-Router,React-Native-Router和React-Router-Native,但它们中没有一个显然更好.

Answer 1

我也遇到过同样的问题。看起来 React-router-flux 的开发人员还没有找到解决这个问题的正确方法。目前，您必须首先导航到父组件，然后从那里导航到它的子组件......

<Scene>
  <Scene key="scene1">
    <Scene key="scene2" hideNavBar component={Scene2}/>
  </Scene>
  <Scene key="scene3">
    <Scene key="scene4" hideNavBar component={Scene4}/>
    <Scene key="scene5" hideNavBar component={Scene5}/>
    <Scene key="scene6" hideNavBar component={Scene6}/>
  </Scene>
</Scene>

假设您处于 ，scene2您必须执行以下操作才能到达scene4：

<Scene>
  <Scene key="scene1">
    <Scene key="scene2" hideNavBar component={Scene2}/>
  </Scene>
  <Scene key="scene3">
    <Scene key="scene4" hideNavBar component={Scene4}/>
    <Scene key="scene5" hideNavBar component={Scene5}/>
    <Scene key="scene6" hideNavBar component={Scene6}/>
  </Scene>
</Scene>

该解决方案复制自https://github.com/aksonov/react-native-router-flux/issues/1801#issuecomment-307559086

这是一种相当昂贵的方法，因为您必须导航到两个组件而不是一个组件，但它看起来是目前唯一的方法。