Как я могу обновить 1 строку представления списка @Shoutem/ui реагировать на родной

Я пытаюсь использовать ListView данных @shoutem/ui ListView, которые я получаю через API, ответ представляет собой объект массива! Внутри 1 объекта есть 1 ключевое значение, такое как статус с параметрами (следовать/не следовать)! Если параметры следуют, я отображаю строку с полной звездой или нет, я определяю с пустой звездой. Но теперь я хочу щелкнуть одну строку! Я хочу изменить пустую звезду на полную звезду или наоборот и в то же время сохранить идентификатор строки в один список массивов! Так кто-нибудь может дать мне решение? Большое спасибо за Вашу помощь! И хорошего дня Вот моя картинка: введите здесь описание изображения


react-native shoutem
person Chu Việt Hưng    schedule 25.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы должны обрабатывать этот внутренний компонент, который вы визуализируете как строку. Допустим, вы визуализируете свою строку следующим образом:

renderRow(object) {
  const iconName = object.status === 'follow' ? 'add-to-favorites-full' : 'add-to-favorites';
  return (
    <Row>
      <Image
        styleName="small rounded-corners"
        source={{ uri: object.imageUrl }}
      />
      <View styleName="vertical stretch space-between">
        <Subtitle>object.name</Subtitle>
        <Caption>object.status</Caption>
      </View>
      <Button styleName="right-icon" onPress={() => this.updateObjectStatus(object)}><Icon name={iconName} /></Button>
    </Row>
  );
}

затем, если ваш объект необходимо обновить на сервере, вам нужно будет опубликовать это в своем API внутри вашей функции updateObjectStatus и обновить данные с сервера. Если вы обновляете статус объекта локально в состоянии приложения с помощью избыточного действия. Оба случая вызовут изменение ваших данных и, следовательно, новый рендеринг вашего ListView. который теперь будет отображать строку, на которую вы нажали, с полной звездой.

Вам может помочь этот экран: https://github.com/shoutem/extensions/blob/master/shoutem-books/app/screens/BooksListScreen.js

он обрабатывает это внутри этих двух компонентов:

person Ivan Vukovic    schedule 25.04.2017