отрисовывать четыре кнопки на каждом элементе в плоском списке программно реагировать - PullRequest
Новая
       60

отрисовывать четыре кнопки на каждом элементе в плоском списке программно реагировать

0 голосов
/ 20 сентября 2019

Я получаю данные из API, и данные поступают в форме ниже 

data : [
        {
          source1: { number: 1,title: '', content: ''},
          source2: { number: 2, title: '',content: ''},
          source3: { number: 4,  title: '',content: '' },
          id: '1',
          title: '',
        },
        {
          source1: { number: 1,title: '', content: ''},
          source2: { number: 2, title: '',content: ''},
          source3: { number: 4,  title: '',content: '' },
          id: '2',
          title: '',
        }
      ]

Я хочу показать в Flatlist и что я хочу от этого, что

Pictruie

Четыре кнопки есть.

При нажатии на одну из них будет изменен текст, а также стиль кнопкиобновлено.Нажатие кнопки и изменение текста будут исходить из данных -> soruce 1 (кнопка 1) source2 (кнопка 2) source3 (кнопка 3) soruce 4 (кнопка 4).для одного элемента

Помогите мне, как можно реализовать каждый элемент рендеринга в flatlist или с помощью map ()?

спасибо

1 Ответ

1 голос
/ 20 сентября 2019

Один из способов - сохранить activeSource / activeItem в данных и обновить его при смене источника из Touchable / Button. Таким образом, будет легко поддерживать активный источник для каждого элемента. 

data: [
 {source1:'',source2:'',source3:'',...,activeSource:'source1',id:1,Title:''},
 {source1:'',source2:'',source3:'',...,activeSource:'source1',id:2,Title:''},
 {source1:'',source2:'',source3:'',...,activeSource:'source1',id:3,Title:''},
 ...
]

ИзменитьactiveSource из Touchable из предметного индекса, который вы получаете в renderItem prop

renderItem=(({item,index})=>{...})

OnChange будет выглядеть примерно так 

changeSource = (source, itemIndex) => {
    this.setState(prevState => ({
      data: prevState.data.map((item, index) => {
        if (index !== itemIndex) return item;
        return {
          ...item,
          activeSource: source,
        };
      }),
    }));
  };

и визуализировать соответствующий источникэлемент как 

<Text>{item[item[activeSource]]}</Text

Iam, прикрепляющий выставку ссылка

...