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
deLogin
y habilitar el cajón en la pantalla delDashboard
. Implementé''react-native-drawer''
conNavigator
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>
)
}
}