使用 React-Native-Router-Flux 在 React Native 中嵌套场景

Posted 2023-02-22

【中文标题】使用 React-Native-Router-Flux 在 React Native 中嵌套场景

【英文标题】：Nested Scenes in React Native with React-Native-Router-Flux

【发布时间】：2017-04-20 05:21:12

【问题描述】：

我正在使用 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 属性不应为空。”

如果我在 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，但显然没有一个更好。

【参考方案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：

Actions.scene3()
Actions.scene4()

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

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