当单击菜单到另一个场景时，反应原生通量自动关闭侧菜单抽屉答案

【问题标题】：react native flux auto close side menu drawer when click menu to another scene当单击菜单到另一个场景时，反应原生通量自动关闭侧菜单抽屉
【发布时间】：2017-09-30 00:59:51
【问题描述】：

当我单击菜单到另一个场景时，有人可以帮助我如何关闭侧菜单反应原生通量吗？

我试过了，还是关不上

这里是我的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 应用程序 * 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);

【问题讨论】：

标签： react-native react-native-router-flux

【解决方案1】：

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 }); 在 return 之后，所以它永远不会运行。

【讨论】：

【解决方案2】：

解决了！ put Actions.refresh({key: 'drawer', open: value => !value });到下一个场景...

【讨论】：

【解决方案3】：

有效：Actions.drawerClose()

【讨论】：