无法使用带react-native-router-flux的react-native-drawer导航到不同的屏幕
我使用react-native-router-flux作为导航系统，使用react-native-drawer作为侧边栏。如果用户点击侧边栏中的菜单项，我希望将用户重定向到不同的屏幕并关闭抽屉。我使用了下面的代码片段。
Actions.refresh({key: 'drawer', open: false})关闭抽屉
用于打开第二页的Actions.pageTwo.call()
如果我在不同的函数中使用它，两者都可以正常工作。但是，如果我从同一个函数中触发这两个代码片段。它不起作用。
提前谢谢你，
回答 2
Stack Overflow用户
发布于 2016-09-14 05:32:15
我在这两个库中都有适合我的场景。在较高的级别上，我创建了一个自定义组件来呈现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>
...
}
}Stack Overflow用户
发布于 2016-08-12 00:06:00
我和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的componentWillMount或componentDidMount方法上使用Actions.refresh({key: 'navigationDrawer', open: false)。
https://stackoverflow.com/questions/38896878
复制相似问题
腾讯云开发者
