这个语法错误如何在react-native-elements中解决？

我正在使用map函数从对象数组中获取数据。还使用反应本地元素来创建用户界面。这是代码。

import React, {Component} from "react"; 
import { List, ListItem } from 'react-native-elements' 

import ProfileContent from "../components/ProfileContent"; 

class CallsScreen extends Component { 

    const list = [ 
    { 
    name: 'John Baker', 
    avatar_url: require("../img/profile1.jpg"), 
    subtitle: 'Lorem ipsum dolor sit amet, qui quaerendum definitionem cu.', 
    icon: 'arrow-round-up', 
    iconcolor: '#00c853' 
    }, 

    { 
    name: 'Samantha Stewart', 
    avatar_url: require("../img/profile2.jpg"), 
    subtitle: 'Lorem ipsum dolor sit amet, qui quaerendum definitionem cu.', 
    icon: 'arrow-round-down', 
    iconcolor: '#d50000' 

    }, 

    { 
    name: 'Lauren Murray', 
    avatar_url: require("../img/profile3.jpg"), 
    subtitle: 'Lorem ipsum dolor sit amet, qui quaerendum definitionem cu.', 
    icon: 'arrow-round-up', 
    iconcolor: '#00c853' 
    }, 

    { 
    name: 'Joel Henry', 
    avatar_url: require("../img/profile4.jpg"), 
    subtitle: 'Lorem ipsum dolor sit amet, qui quaerendum definitionem cu.', 
    icon: 'arrow-round-down', 
    iconcolor: '#00c853' 
    }, 

] 

    render() { 
    return (

<List containerStyle={{marginBottom: 20}}> 
    { 
    list.map((l, i) => (
     <ListItem 
     roundAvatar 
     avatar={{uri:l.avatar_url}} 
     key={i} 
     title={l.name} 
     subtitle={l.subtitle} 
     rightIcon={{ name: {l.icon}, style: { color: {l.iconcolor}} 
     /> 


    )) 
    } 
</List> 

    export default CallsScreen;

当我运行模拟器时，它在此行显示语法错误。但是，我不知道如何解决它。

rightIcon={{ name: {l.icon}, style: { color: {l.iconcolor}}

你能帮我解决这个语法错误吗？

来源

2017-10-09 NewTech Lover

你在你的语法

这

rightIcon={{ name: {l.icon}, style: { color: {l.iconcolor}}

额外和失踪括号应该是这个

rightIcon={{ name: l.icon, style: { color: l.iconcolor}}}

来源

2017-10-09 09:40:59 bennygenel

感谢回答它解决了具体问题，但现在正显示出此错误。我在上面添加了一张图片。 –

这与'avatar'道具有关。当用require（'...'）使用本地图像时，你需要像'avatar = {require（'nameoftheimage.png'）}'一样传递它。使用'uri'道具给物体是用于远程图像的。 – bennygenel

这个语法错误如何在react-native-elements中解决？

回答

相关问题