I have a button inside a custom drawer, however when trying to use a cross-screen navigation method on this button I get the following error: Error
I am using: "react-navigation": "^3.11.1", "react-native": "^0.60.4", "react": "16.8.6". I am debugging the application on an S8 + with Android 8.0
const DEVICE_WIDTH = Dimensions.get('window').width;
const CustomDrawerComponent = props => (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView>
<View style={{flexDirection:'row', backgroundColor:'#006bb3', height:100, flex:1, justifyContent:'center'}}>
<View style={{height:100,width:60, borderRadius:30,justifyContent:'center'}}>
<Image source={require('../../assets/no-login.png')} style={{height:40,width:40, borderRadius:20}}></Image>
</View>
<View style={{justifyContent:'center', height:100}}>
<Text style={{color:'white', fontSize:15, fontWeight:'700'}}>Acesse sua conta agora!</Text>
<Text style={{color:'white', fontSize:14, fontWeight:'600', textDecorationLine:'underline'}}>Clique aqui!</Text>
</View>
</View>
<DrawerItems {...props} />
<TouchableOpacity
style={{height:50, justifyContent:'center'}}
onPress={this.logout}
>
<View style={{marginBottom:0, flexDirection:'row'}}>
<View style={{marginLeft:14}}>
<Icon name='login-variant'type='MaterialCommunityIcons' style={{color:'grey' ,fontSize:25}}/>
</View>
<View style={{marginLeft:27}}>
<Text style={{fontSize:15, fontWeight:'700', color:'grey'}}> Sair da Conta</Text>
</View>
</View>
</TouchableOpacity>
</ScrollView>
</SafeAreaView>
);
const AppDrawerNavigator = createDrawerNavigator(
{
Home:{
screen:HomeScreen,
navigationOptions:{
drawerLabel:'Home',
drawerIcon: ({tintColor}) =>
(<Icon name='home'type='FontAwesome' style={{color:tintColor, fontSize:25}}/>)
},
},
HomeLogin:{
screen:HomeLogin,
navigationOptions:{
drawerLabel: () => null,
},
},
Login:{
screen:LoginScreen,
navigationOptions:{
drawerLabel: () => null
}
},
Register:{
screen:RegisterScreen,
navigationOptions:{
drawerLabel: () => null
},
headerStyle:{
backgroundColor:'#006bb3',
},
headerTitleStyle:{
fontWeight:'bold',
},
title:'Cadastre-se!'
},
},
{
drawerWidth: DEVICE_WIDTH*0.7,
initialRouteName:'Home',
contentComponent: CustomDrawerComponent,
contentOptions:{
activeTintColor:'#006bb3',
labelStyle:{
fontSize:14,
},
}
}
);
logout = () =>{
this.props.navigation.navigate('Login')
}
const Menu = createAppContainer(AppDrawerNavigator);
//export default connect(mapStateToProps, mapDispatchToProps) (Menu)
export default Menu
I was hoping that clicking on the "Sair da conta" button would navigate to the 'Login' screen.
You didn't deliver props to the object. And you don't have to make a function in a simple command syntax.
onPress={() => this.props.navigation.navigate('Login')}
...
contentComponent: props => < CustomDrawerComponent {...props} />,
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.