React native 当单击菜单到另一个场景时，自动关闭侧菜单抽屉

当我点击菜单进入另一个场景时，有人能帮我关闭侧菜单吗

我试过了，但还是关不上

这里是我的DroperLayout.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 });

}

}

import React，{Component}来自'React'；
从“反应本机抽屉”导入抽屉；
从“./SideMenu”导入侧菜单；
从“react native router flux”导入{Actions，DefaultRenderer}；
导出默认类NavigationDrawer扩展组件{
render（）{
const state=this.props.navigationState；
const children=state.children；
返回(
Actions.refresh（{key:state.key，open:true}）
onClose={（）=>Actions.refresh（{key:state.key，open:false}）
type=“静态”
内容={}
tapToClose={true}
/*CaptureSpirates={true}*/
/*全景遮罩={0.02}*/
OpenDrawerofset={0.2}
panCloseMask={0.2}
negotiatePan={true}
tweenHandler={（比率）=>({
main:{opacity:Math.max（0.54,1-ratio）}
})}>
);
刷新（{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>
    )

}
}

import React，{Component}来自'React'；
进口{
看法
文本、按钮、可触摸突出显示
}从“反应本机”；
从“react native Router flux”导入{Router，Scene，Actions}；
导出默认类SlideMenu扩展组件{
render（）{
返回(
Actions.login（）}title={“hhhhh”}>
菜单
)
}
}

这里是我的路由器（App.js） /** *示例React本机应用程序 * *@flow */

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
}从“反应本机”；
从“react native Router flux”导入{Router，Scene，Actions}；
从“/Scene/Home”导入主页；
从“./Scene/Login”导入登录名；
从“./Scene/Register”导入寄存器；
从“./Component/DrawerLayout”导入抽屉布局；
导出默认类组件{
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});
AppRegistry.registerComponent（'Flux'，（）=>Flux）；

操作。刷新（{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时，这很好）

另外，在第一次渲染中似乎有一些无法访问的代码<代码>操作.刷新（{key:'drawer'，open:value=>！value}）在返回之后，因此它将永远不会运行。

操作。刷新（{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时，这很好）

---

另外，在第一次渲染中似乎有一些无法访问的代码<代码>操作.刷新（{key:'drawer'，open:value=>！value}）在返回之后，因此它将永远不会运行。

已解决！put Actions.refresh（{key:'drawer'，open:value=>！value}）；转到下一个场景…

已解决！put Actions.refresh（{key:'drawer'，open:value=>！value}）；到下一个场景…

它工作：

动作.抽屉锁（）

它工作：

动作.抽屉锁（）

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);