Javascript 如何使用抽屉内的导航按钮?
我在自定义抽屉中有一个按钮,但是当尝试在此按钮上使用跨屏幕导航方法时,出现以下错误: 我使用的是:“反应导航”:“^3.11.1”,“反应本机”:“^0.60.4”,“反应”:“16.8.6”。 我正在用Android 8.0在S8+上调试应用程序Javascript 如何使用抽屉内的导航按钮?,javascript,react-native,navigation-drawer,react-navigation,react-navigation-drawer,Javascript,React Native,Navigation Drawer,React Navigation,React Navigation Drawer,我在自定义抽屉中有一个按钮,但是当尝试在此按钮上使用跨屏幕导航方法时,出现以下错误: 我使用的是:“反应导航”:“^3.11.1”,“反应本机”:“^0.60.4”,“反应”:“16.8.6”。 我正在用Android 8.0在S8+上调试应用程序 const DEVICE_WIDTH = Dimensions.get('window').width; const CustomDrawerComponent = props => ( <SafeAreaView style={{
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
const DEVICE_WIDTH=Dimensions.get('window').WIDTH;
const CustomDrawerComponent=props=>(
阿塞斯苏亚康塔阿格拉!
阿奎集团!
塞尔达康塔酒店
);
const AppDrawerNavigator=createDrawerNavigator(
{
主页:{
屏幕:主屏幕,
导航选项:{
抽屉标签:'家',
抽屉图标:({tintColor})=>
()
},
},
家庭登录:{
屏幕:HomeLogin,
导航选项:{
抽屉标签:()=>null,
},
},
登录:{
屏幕:登录屏幕,
导航选项:{
抽屉标签:()=>null
}
},
登记册:{
屏幕:注册表屏幕,
导航选项:{
抽屉标签:()=>null
},
头型:{
背景颜色:“#006bb3”,
},
头饰样式:{
字体权重:'粗体',
},
标题:“地籍-se!”
},
},
{
抽屉宽度:设备宽度*0.7,
initialRouteName:“主页”,
contentComponent:CustomDrawerComponent,
内容选项:{
activeTintColor:“#006bb3”,
标签样式:{
尺寸:14,
},
}
}
);
注销=()=>{
this.props.navigation.navigate('Login'))
}
const Menu=createAppContainer(AppDrainerNavigator);
//导出默认连接(mapStateToProps、mapDispatchToProps)(菜单)
导出默认菜单
我希望单击“Sair da conta”按钮可以导航到“登录”屏幕。您没有向对象提供道具。而且,您不必使用简单的命令语法生成函数
onPress={()=>this.props.navigation.navigate('Login')}
...
contentComponent:props=> ,
感谢您的回复!我按照我的建议做了,但是,我有以下错误:TypeError:undefined不是对象(评估“\u this.props.navigation”
无需将函数传递给contentComponent
,并在导航道具自动传递时手动传播道具。因此,您的错误告诉您,由于某种原因,这种情况不会发生。请尝试记录道具,以查看得到了什么passed@leandror代码在吗对一个屏幕上的代码提出疑问?如果你有一个屏幕代码,请将你的供应代码转移到另一个文件中。嗨,伙计们,谢谢你们的帮助!我发现使用另一种方法登录更好。我现在为用户配置文件指定了一个页面,在这里我可以选择注销帐户。