如何在本地菜单中使用react-native实现路由

Question

我是react-native的新手，我正在尝试构建一个带有路由器和侧面菜单的应用程序，其中包含指向此菜单内其他页面的一些链接。

好吧，我实际上是在使用gb-native-router和react-native-side-menu来做到这一点。 实际上，我已经找到2个解决方案。

第一个解决方案：

<SideMenu menu={menu}>  //here, the sidemenu is outside the router, i can't put in inner (the chat will slide but not the Navigator)
    <Router
      firstRoute={Routes.Main.App}
      headerStyle={Styles.NavBar.container}
      titleStyle={Styles.NavBar.navContent}
      borderBottomWidth={Styles.Props.NavBar.borderBottomWidth}
      borderColor={Styles.Props.NavBar.borderColor}
    />
</SideMenu>

第二种解决方案：

将侧面菜单包括在test.js文件中（请参阅链接）以执行以下操作：

<SideMenu menu={menu}>  
    <View><Chat /></View>
</SideMenu>

问题：第一个解决方案运行良好，但是当我尝试执行“ this.props.toRoute（{}）”时，此函数未定义（因为我猜侧面菜单不在路由器中）并且第二种解决方案，当我访问侧面菜单时，路由器（导航器）将不会与页面的其余部分一起移动（因为他不在侧面菜单：p中）。

这个探针有什么帮助吗？ 我想我可以使用NSNotificationCenter向所有应用发送信号，并在路由器内添加一个侦听器以尝试正确路由...但我想找到一种更简单更好的方法。

您可以在此处查看更多代码： https : //rnplay.org/apps/Xr8PPA

谢谢你的帮助 ！

编辑：

这里是来自react-native-side-menu的index.js的简短代码：

  render() {
    let menu = null;

    /**
     * If menu is ready to be rendered
     */
    if (this.state.shouldRenderMenu) {
      menu = <View style={styles.menu}>{this.props.menu}</View>;
    }

    return (
      <View style={styles.container} onLayout={this.onLayoutChange.bind(this)}>
        {menu}
        {this.getContentView()}
      </View>
    );
  }

看来我来自menu.js的菜单仅在视图中呈现。 所以我不知道如何从这里访问路由器... :(

Answer 1

尝试结合使用this.refs和不是从子级而是从父级调用toRoute函数。

rnplay上的代码由于依赖关系而损坏，但是我更新了代码：

更新： https ： //rnplay.org/apps/kcD0kg