当我点击菜单到另一个场景时,有人可以帮助我关闭sidemenu对原生通量的反应吗?
我试过了,但仍然无法关闭
这里是我的drawerlayout.js代码
import React, { Component } from 'react';
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="static"
content={<SideMenu />}
tapToClose={true}
/*captureGestures={true}*/
/*panOpenMask={0.02}*/
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>
);
Actions.refresh({key: 'drawer', open: value => !value });
}
}
和sidemenu.js代码
import React, { Component } from 'react';
import {
View,
Text, Button, TouchableHighlight
} from 'react-native';
import { Router, Scene, Actions } from 'react-native-router-flux';
export default class SlideMenu extends Component {
render() {
return (
<View>
<Button onPress={()=>Actions.login()} title={"hhhhhhhh"}>
Menu
</Button>
</View>
)
}
}
这里是我的路由器(App.js) / ** *示例React Native App * https://github.com/facebook/react-native * @流 * /
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import { Router, Scene, Actions } from 'react-native-router-flux';
import Home from './Scene/Home';
import Login from './Scene/Login';
import Register from './Scene/Register';
import DrawerLayout from './Component/DrawerLayout';
export default class Flux extends Component {
render() {
return (
<Router>
<Scene key="drawer" component={DrawerLayout} open={false}>
<Scene key="Main" tabs={false}>
<Scene key="home" component={Home} title="Home" initial={true} />
<Scene key="login" component={Login} title="Login" />
<Scene key="register" component={Register} title="Register" />
</Scene>
</Scene>
</Router>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Flux', () => Flux);
答案 0 :(得分:1)
解决了!把Actions.refresh({key:&#39; drawer&#39;,open:value =&gt;!value});到下一个场景...
答案 1 :(得分:0)
Actions.refresh({key: 'drawer', open: value => !value })
刷新道具,而不是状态。你有抽屉的道具open={state.open}
,但你的onOpen和onClose函数调用Actions.refresh
来更新道具,而不是状态。
尝试open={this.props.open}
我在特定的路由器包中遇到了很多困难,所以我不确定它是否能够轻松实现。如果没有,那么你可以在onOpen / onClose函数中使用setState调用。我个人使用redux进行数据流和存储sideMenu的isOpen(当你到达需要基于sideMenu状态的特殊panResponder规则的组件时,这很好,或者需要为某些活动组件禁用sideMenu)。
此外,您的第一个渲染中看起来有一些无法访问的代码。返回后Actions.refresh({key: 'drawer', open: value => !value });
是永远无法运行的。
答案 2 :(得分:0)
有效:Actions.drawerClose()