react native flux auto close side menu drawer when click menu to another scene

Question

can someone help me how to close sidemenu react native flux when i clicked menu to another scene?

i have try, but still cant close

here my drawerlayout.js code

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

}

}

and sidemenu.js code

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

}
}

and here my router (App.js) /** * Sample React Native App * https://github.com/facebook/react-native * @flow */

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

score 1 · Accepted Answer · answered May 02 '17 at 15:54

1

solved! put Actions.refresh({key: 'drawer', open: value => !value }); to next scene...

answered May 02 '17 at 15:54

jack

31
1
7

score 1 · Answer 2 · answered May 05 '19 at 14:11

1

It works: Actions.drawerClose()

answered May 05 '19 at 14:11

matt

607
7
20

Travis White · Answer 3 · 2017-05-02T14:28:47.780

Actions.refresh({key: 'drawer', open: value => !value }) refreshes the props, not the state. You have the Drawer's prop open={state.open} but your functions for onOpen and onClose call Actions.refresh which updates the props, not the state.

Try open={this.props.open}

I struggled a lot with that particular router package so I don't know for sure if it will work that easily. If not, then you can do it with setState calls in your onOpen/onClose functions. I personally use redux for data flow and store sideMenu's isOpen there (which is nice when you get to a component that needs special panResponder rules based on sideMenu state, or need to disable sideMenu for certain active components).

Also, looks like you have some unreachable code in your first render. Actions.refresh({key: 'drawer', open: value => !value }); is after the return so it will never run.

react native flux auto close side menu drawer when click menu to another scene

3 Answers3

Linked