react-native - 无法使用带有 react-native-router-flux 的 react-native-drawer 导航到不同的屏幕

Question

我react-native-router-flux用于导航系统并react-native-drawer用于侧边栏。如果用户单击侧边栏中的菜单项，我想将用户重定向到不同的屏幕并关闭抽屉。我正在使用以下代码片段。

Actions.refresh({key: 'drawer', open: false})关闭抽屉

Actions.pageTwo.call()打开第二页

如果我在单独的功能中使用它，两者都可以正常工作。但是，如果我从同一个函数中触发两个片段。它不工作。

提前致谢，

Answer 1

我react-native-router-flux和抽屉一起工作过，也遇到过一些问题。如果两个场景都是抽屉的孩子，像这样

<Scene key="navigationDrawer" component={NavigationDrawer}> <Scene key="pageOne" component={PageOne}/> <Scene key="pageTwo" component={PageTwo}/> </Scene>

您可以使用Actions.pageTwo({key: 'navigationDrawer', open: false})which 应该在导航时关闭抽屉。

否则，您可以Actions.refresh({key: 'navigationDrawer', open: false)在 PageTwocomponentWillMount或componentDidMount方法上使用。

Answer 2

我有这个场景适用于两个库。在高层次上，我创建了一个自定义组件来呈现 react-native-drawer 的内容，我将一个函数传递给负责关闭抽屉的函数。然后，当我按下其中一个抽屉项目时，我会触发 react-native-router-flux 导航操作（在我的情况下是 PUSH），并调用传入的函数来关闭抽屉。

这是定义我的抽屉的样子。请记住 DrawerNavigationConten 最终只是一个 ListView 或您喜欢呈现抽屉内容的任何实现。

class RootComponent extends Component {
  ...

  closeDrawer() {
    this.drawerRef.closeDrawer();
  }

  render() {
    const drawerNavigationContent = (
      <DrawerNavigationContent
        closeDrawer={this.closeDrawer.bind(this)}
      />
    );

    return <Drawer
      ref={(ref) => { this.drawer = ref; }}
      content={drawerNavigationContent}
      ...
      >
      ...here I define my react-native-router-flux scenes...
      </Drawer>
    );
  }
  ...
}

这是 DrawerNavigationContent 中的重要项目

  import { Actions } from 'react-native-router-flux';

  class DrawerNavigationContent extends Component {
    ...

    navigate(location) {
      Actions[location]();
      this.props.closeDrawer();
    }

    ...

    render() {
      ...
      <TouchableOpacity onPress={this.navigate(...some dynamic scene key...)}>
        ...
      </TouchableOpacity>
      ...
    }
  }