反应本机元素 - 在 listItem 中为徽章背景颜色应用条件样式

Question

我是 React Native 的新手。我正在使用 "react-native-elements"：“^1.2.7”。我正在尝试根据条件更改 listItem 中徽章的背景颜色。但是我得到一个错误。

这是我的代码

import React from 'react';
import { View, Text } from 'react-native';
import { ListItem, Badge } from 'react-native-elements';
import { TASK }  from '../../model';
import { APP_COLORS } from '../../styles/color.js';

const TaskList = ({ taskList }) => (
  <View>
    {
      taskList.map(task => (
        <ListItem
          key={task.id}
          title={task.content}
          badge={{
            value: task.status,
            badgeStyle: {
              task.status === TASK.todoStatus
                ? { backgroundColor: APP_COLORS.accent }
                : { backgroundColor: APP_COLORS.lightPrimaryColor }
            }
          }}
          chevron
          bottomDivider
        />
      ))
    }
  </View>
);


export default TaskList;

显示的错误是："Unexpected token, expected ","...

能帮我解决一下吗

Answer 1

试试这个代码：

import React from 'react';
import { View, Text } from 'react-native';
import { ListItem, Badge } from 'react-native-elements';
import { TASK } from '../../model';
import { APP_COLORS } from '../../styles/color.js';

const TaskList = ({ taskList }) => (
  <View>
    {
        taskList.map(task => (
          <ListItem
            key={task.id}
            title={task.content}
            badge={{
              value: task.status,
              badgeStyle: {{
                backgroundColor: task.status === TASK.todoStatus ? APP_COLORS.accent : APP_COLORS.lightPrimaryColor
              }}
            }}
            chevron
            bottomDivider
          />
        ))
      }
  </View>
);


export default TaskList;

反应本机元素 - 在 listItem 中为徽章背景颜色应用条件样式

React native elements - Apply condition style for badge backgroundColor in listItem

react-native

listitem

badge

react-native-elements