我react-native-router-flux
用于导航系统并react-native-drawer
用于侧边栏。如果用户单击侧边栏中的菜单项,我想将用户重定向到不同的屏幕并关闭抽屉。我正在使用以下代码片段。
Actions.refresh({key: 'drawer', open: false})
关闭抽屉
Actions.pageTwo.call()
打开第二页
如果我在单独的功能中使用它,两者都可以正常工作。但是,如果我从同一个函数中触发两个片段。它不工作。
提前致谢,
我react-native-router-flux
用于导航系统并react-native-drawer
用于侧边栏。如果用户单击侧边栏中的菜单项,我想将用户重定向到不同的屏幕并关闭抽屉。我正在使用以下代码片段。
Actions.refresh({key: 'drawer', open: false})
关闭抽屉
Actions.pageTwo.call()
打开第二页
如果我在单独的功能中使用它,两者都可以正常工作。但是,如果我从同一个函数中触发两个片段。它不工作。
提前致谢,
我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
方法上使用。
我有这个场景适用于两个库。在高层次上,我创建了一个自定义组件来呈现 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>
...
}
}