我试图在react-navigation中创建一个自定义的抽屉。但是我得到了一个错误。错误是JSX attributes must only be assigned a non-empty expression
。我甚至创建了数组并Map它来显示,但是仍然得到一个错误。我错过了什么吗?
import { StackNavigator, DrawerNavigator } from 'react-navigation';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
const navitems =[
{
name:'Home',
nav:'classesnew',
},
{
name:'Device',
nav:'start',
},
]
class DrawerContent extends React.Component{
constructor(props) {
super(props)
}
render(){
return (
<Image source={require('../images/logo.png')}
style={styles.container}>
<View style={{justifyContent: 'center',
alignItems: 'center',}}>
<Image style={styles.image} source={{uri: ''}}/>
</View>
<View>
{
navitems.map((l,i)=>{
return (
<TouchableOpacity
key={i}
style={{marginBottom:0.5}}
onPress={()=>{
this.props.navigation.navigate(l.nav)
}
}>
<View style={{flexDirection:'row', padding: 15, paddingLeft:0, backgroundColor:'#fff0', borderTopWidth:0.5, borderColor:'rgba(255,255,255, 0.5)', marginLeft: 20, marginRight:20}}>
<Icon name={l.icon} size={20} style={{paddingLeft:10, paddingRight: 20, height: 25, }} color="#ffffff" />
<Text style={{fontSize:16, fontWeight: 'bold',color:'#fff'}}>{l.name}</Text>
</View>
</TouchableOpacity>)
})
}
</View>
</Image>)
}
}
const DrawerRoutes = (
{
Main: { screen: App, title: 'Main' },
Device: { screen: Device, title: 'Device' },
})
const Drawer = DrawerNavigator(DrawerRoutes ,{
contentComponent:({navigation})=> <DrawerContent navigation={navigation} routes={DrawerRoutes} />,
});
Drawer.navigationOptions = {
contentOptions: {
activeBackgroundColor: '#ff5976',
style: {
backgroundColor: '#000000',
zIndex: 100,
paddingTop: 0
}
},
header: ({ state, setParams, navigate, dispatch }) => ({
visible: true,
tintColor: '#ffffff',
title: "LokaLocal",
style: {
backgroundColor: '#ff5976'
},
right: (
<TouchableOpacity
onPress={() => navigate('DrawerOpen')}
>
<Icon name="search" size={16} style={{ padding: 10, paddingRight: 20 }} color="#ffffff" />
</TouchableOpacity>
),
left: (
<TouchableOpacity
onPress={}
>
<Icon name="bars" size={16} style={{ padding: 10, paddingLeft: 20 }} color="#ffffff" />
</TouchableOpacity>
),
})
}
export const Routes = StackNavigator(
{
Login: { screen: Login },
Dashboard: {screen: Drawer},
},
);
我使用的是React导航1.0.0.bet.9
3条答案
按热度按时间1qczuiv01#
这里,正如错误所提到的,您不能将empy表达式分配给JSX属性。
t0ybt7op2#
JSX属性中不能有空的{}。在这里不能有
通过以下方法解决此问题
bz4sfanl3#
错误:onPress={}您必须传递一个属性,但要运行此临时属性,可以按以下方式执行:onPress={""}让我知道它是否有效:)