如何使用 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({})”时，未定义此函数（因为侧面菜单不在路由器 i猜测） 第二种解决方案，当我访问侧面菜单时，路由器（导航器）不会与页面的其余部分一起移动（因为他不在侧面菜单中：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