react ios react-native drawer navigator

ios - Cómo configurar ''react-native-drawer'' visible solo para Dashboard luego de iniciar sesión en reaccionar-native



react native navigation (2)

En react-native, quiero desactivar el cajón en el Login de Login y habilitar el cajón en la pantalla del Dashboard . Implementé ''react-native-drawer'' con Navigator para navegar entre las rutas.

renderizar el método de la siguiente manera:

render() { <Drawer ref={(ref) => this._drawer = ref} disabled={!this.state.drawerEnabled} type="overlay" content={<Menu navigate={(route) => { this._navigator.push(navigationHelper(route)); this._drawer.close() }}/>} tapToClose={true} openDrawerOffset={0.2} panCloseMask={0.2} closedDrawerOffset={-3} styles={{ drawer: {shadowColor: ''#000000'', shadowOpacity: 0.8, shadowRadius: 3}, main: {paddingLeft: 3} }} tweenHandler={(ratio) => ({ main: { opacity:(2-ratio)/2 } })}> <Navigator ref={(ref) => this._navigator = ref} configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft} initialRoute={{ id: ''Login'', title: ''Login'', index: 0 }} renderScene={(route, navigator) => this._renderScene(route, navigator)} navigationBar={ <Navigator.NavigationBar style={styles.navBar} routeMapper={NavigationBarRouteMapper} /> } /> </Drawer> ); }

renderScene de la siguiente manera para navegar por las rutas:

_renderScene(route, navigator) { navigator.navigate = self.navigate; switch (route.id) { case ''Login'': return ( <Login navigator={navigator}/> ); case ''Dashboard'': return ( <Dashboard navigator={navigator}/> ); } }

He escrito un método para habilitar e inhabilitar el cajón en react-native:

navigate(route, method){ if(route) switch (route.id) { case ''Login'': this.state = {drawerEnabled: false, navigationBarEnabled: false}; break; case ''Dashboard'': this.state = {drawerEnabled: true, navigationBarEnabled: true}; break; } this.forceUpdate(); this.refs.navigator[method](route); } }

Inicialmente he establecido propiedad en clase y en constructor, se ha llamado al método de navegación.

state = {drawerEnabled:true, navigationBarEnabled: true}; constructor(){ super(); this.navigate = this.navigate.bind(this); }

Entonces, ¿cuál sería la forma posible de desactivar el cajón en el menú de Login de Login y habilitarlo en la pantalla del Dashboard ?


Puede establecer las propiedades panOpenMask y panCloseMask del cajón en 0 en la escena de inicio de sesión.

Algo como esto

<Drawer> panOpenMask={isItLoginPage? 0 : 0.2} panCloseMask={isItLoginPage? 0 : 0.2} ... </Drawer>


Tienes que cambiar tu método _renderScene() siguiente manera:

_renderScene(route, navigator) { navigator.navigate = this.navigate; switch (route.id) { case ''Login'': return ( <Login navigator={navigator} {...route.passProps} /> ); case ''Dashboard'': return ( <Dashboard navigator={navigator} {...route.passProps} />); } }

No es necesario el método de navigate() , por lo tanto, elimine ese método. En todos los casos debe escribir como su necesidad y para default case lo ha establecido como null . Si está configurando null significa que null medios a la left y a la right están deshabilitados en la página del Dashboard , pero solo el title está habilitado en el Dashboard .

Debe escribir el código para la left , la right y el title en la toolbar de toolbar siguiente manera:

const NavigationBarRouteMapper = { LeftButton(route, navigator, index, navState) { switch (route.id) { case ''Dashboard'': return ( <TouchableOpacity style={styles.navBarLeftButton} onPress={() => {_emitter.emit(''openMenu'')}}> <Icon name=''menu'' size={25} color={''white''} /> </TouchableOpacity> ) default: return null //For setting Dashboard left button null } }, RightButton(route, navigator, index, navState) { switch (route.id) { case ''Dashboard'': return ( <TouchableOpacity style={styles.navBarRightButton} onPress={() => {route.onPress()}}> <Icon name={''map''} size={25} color={''white''} /> </TouchableOpacity> ) default: return null //For setting Dashboard right button null } }, Title(route, navigator, index, navState) { return ( <Text style={[styles.navBarText, styles.navBarTitleText]}> {route.title} </Text> ) } }