Реагировать на собственные элементы - применить стиль условия для значка backgroundColor в listItem - PullRequest
Новая
       97

Реагировать на собственные элементы - применить стиль условия для значка backgroundColor в listItem

0 голосов
/ 13 апреля 2020

Я новичок, чтобы реагировать на родных. Я использую «response-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;

И отображается сообщение об ошибке: "Неожиданный токен, ожидается", "...

Не могли бы вы помочь мне понять это

1 Ответ

0 голосов
/ 13 апреля 2020

попробуйте этот код вместо: 

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;
...