如何在react-native-elements中解决此语法错误?

时间:2017-10-09 09:39:13

标签: react-native react-native-android react-native-ios expo

enter image description here

我正在使用map函数从对象数组中获取数据。还使用react native元素来创建UI。这是代码。

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}}

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

1 个答案:

答案 0 :(得分:0)

语法中有额外和缺少的括号

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

应该是这个

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