在平面列表中的每个项目上渲染四个按钮以编程方式反应本机

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: '',
        }
      ]

I want to show on Flatlist and what i want from this that

有四个按钮。

当点击其中一个时，文本会改变，按钮样式也会更新。按钮标题和更改文本将来自 data -> source 1 (button 1) source2 (button 2) source3 (button 3) source 4 (button 4) 。对于单个项目

Help me how can implement this each render item on flatlist or through 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

我附上一个展览会 link

在平面列表中的每个项目上渲染四个按钮以编程方式反应本机

render four button on each item in flatlist programmatically react native

javascript

state

react-native

react-native-flatlist