无法使用带有 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 合作过，抽屉也有一些问题。如果两个场景都是抽屉的children这样

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

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

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

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>
      ...
    }
  }

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

can't navigate to different screen using react-native-drawer with react-native-router-flux

react-native

react-native-router-flux