React Native 只能为JSX属性指定非空表达式

2wnc66cl  于 2022-11-17  发布在  React
关注(0)|答案(3)|浏览(175)

我试图在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

1qczuiv0

1qczuiv01#

<TouchableOpacity
      onPress={}

这里,正如错误所提到的,您不能将empy表达式分配给JSX属性。

t0ybt7op

t0ybt7op2#

JSX属性中不能有空的{}。在这里不能有

<TouchableOpacity
    onPress={}
>

通过以下方法解决此问题

<TouchableOpacity
    onPress={someFunction}
>
bz4sfanl

bz4sfanl3#

错误:onPress={}您必须传递一个属性,但要运行此临时属性,可以按以下方式执行:onPress={""}让我知道它是否有效:)

相关问题