我正在尝试使用 react-native-router-flux 设置 react-native-drawer。
我已经在 flux 中设置了抽屉 OTHER INFO文档如下
import React from 'react-native';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';
export default class NavigationDrawer extends Component {
render(){
const state = this.props.navigationState;
const children = state.children;
return (
<Drawer
ref="navigation"
open={state.open}
onOpen={()=>Actions.refresh({key:state.key, open: true})}
onClose={()=>Actions.refresh({key:state.key, open: false})}
type="displace"
content={<SideMenu />}
tapToClose={true}
openDrawerOffset={0.2}
panCloseMask={0.2}
negotiatePan={true}
tweenHandler={(ratio) => ({
main: { opacity:Math.max(0.54,1-ratio) }
})}>
<DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
</Drawer>
);
}
}
然后我将抽屉场景放入 Router 组件中,如下所示
render() {
return (
<Router>
<Scene key="choice" component={ServiceChoice} title="" hideNavBar />
// some scenes go here
<Scene key="drawer" component={NavigationDrawer} open={false} >
<Scene key="main" tabs={true} >
<Scene
key="map"
component={MapScreen}
title=""
hideNavBar
initial
/>
</Scene>
</Scene>
//some other scenes go here
</Router>
);
}
现在的问题是来自另一个组件,例如ServiceChoice,如果我执行 Actions.map()
,什么也不会发生。
任何人都可以指出我做错了什么吗?我可以提供任何其他需要的信息。所有导入也是正确的。
谢谢
最佳答案
所以我最终使用的解决方案是让 Drawer 组件包围 Routes
...
import Drawer from 'react-native-drawer';
...
<Drawer
ref={(ref) => { this.props.appDrawerSet(ref); }}
open={false}
type="overlay"
onOpen={() => { console.log('drawer OPENED'); }}
onClose={() => { console.log('drawer CLOSED'); }}
content={<SideMenu />}
tapToClose
openDrawerOffset={0.2}
panCloseMask={0.2}
negotiatePan
styles={drawerStyles}
tweenHandler={(ratio) => ({
main: { opacity: Math.max(0.54, 1 - ratio) }
})}
>
<Router
sceneStyle={styles.sceneStyle}
navigationBarStyle={styles.navBarStyle}
titleStyle={styles.titleStyle}
>
<Scene key='root'>
//your other scennes, nested or not
</Scene>
</Router>
</Drawer>
我使用 Redux,所以 ref 帮助我将 Drawer 的引用发送到一个 Action,我用它来更新一个名为 appDrawer 的状态元素/变量。然后我可以通过
控制(打开/关闭)抽屉this.props.appDrawer.open()
或
this.props.appDrawer.close()
我的应用程序用例在 Drawer 组件上使用 tapToClose
选项而不是 close() 函数更好 - 虽然在现实生活中通常更多地用于关闭侧边抽屉。
关于android - React Native Drawer 与 React Native Router Flux 设置不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43947814/