在Flatlist中的每个项目上渲染四个按钮，以编程方式响应本机

Question

我正在从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上，我想从中获得什么

有四个按钮。

当单击一个时，文本将被更改，按钮样式也将被更新。按钮标题和更改文本将来自data-> soruce 1（按钮1）source2（按钮2）source3（按钮3）soruce 4（按钮4）。单个项目

  

帮我如何在平面清单上或通过map（）实现每个渲染项？

谢谢

Answer 1

一种方法是在数据中维护一个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:''},
 ...
]

从renderItem属性中获得的项目索引的Touchable更改activeSource

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附加了博览会link