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})来导航时关闭抽屉。

否则，您可以在PageTwo的Actions.refresh({key: 'navigationDrawer', open: false)或componentWillMount方法上使用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>
      ...
    }
  }

无法使用react-native-drawer与react-native-router-flux

2 个答案: