如何在平面列表中多选项目反应原生答案

【问题标题】：How to multiselect items in flatlist react native如何在平面列表中多选项目反应原生
【发布时间】：2019-11-11 05:38:10
【问题描述】：

如何在反应原生平面列表中多选和突出显示组件。我检查了doc。但是任何人都可以帮助我，这有点令人困惑。我已经使用这种方法完成了单选。任何人都可以将其修改为多选。我将在此处给出我已经完成single select的小吃链接@

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';

const Data = [
  {
    id: 1,
    first_name: 'Sile',
  },
  {
    id: 2,
    first_name: 'Clementia',
  },
  {
    id: 3,
    first_name: 'Brita',
  },
  {
    id: 4,
    first_name: 'Duke',
  },
  {
    id: 5,
    first_name: 'Hedvig',
  },
  {
    id: 6,
    first_name: 'Paulie',
  },
  {
    id: 7,
    first_name: 'Munmro',
  },
  {
    id: 8,
    first_name: 'Dyanna',
  },
  {
    id: 9,
    first_name: 'Shanta',
  },
  {
    id: 10,
    first_name: 'Bambi',
  },
];

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedItem: null,
    };
  }

  onPressHandler(id) {
    this.setState({ selectedItem: id });
  }

  render() {
    return (
      <View>
        <FlatList
          extraData={this.state.selectedItem} //Must implemented
          //horizontal={true}
          data={Data}
          keyExtractor={item => item.id.toString()}
          showsHorizontalScrollIndicator={false}
          renderItem={({ item }) => (
            <TouchableOpacity onPress={() => this.onPressHandler(item.id)}>
              <Card
                style={
                  this.state.selectedItem === item.id
                    ? {
                        padding: 10,
                        borderRadius: 5,
                        backgroundColor: '#000000',
                      }
                    : {
                        padding: 10,
                        borderRadius: 5,
                        backgroundColor: '#a1a1a1',
                      }
                }>
                <Text>{item.first_name}</Text>
              </Card>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({

});

这是样本数据

【问题讨论】：

你所说的选择是什么意思，你想将任何类应用于平面列表中的任何项目以突出显示它吗？
高亮组件并将id保存到状态。
我已根据您的问题编辑了我的答案，请检查。
你在哪里编辑过零食或我的问题参考。
我创建了新的零食链接，请参考我在其中提到的答案。如果正确，请将其标记为正确答案。

标签： react-native react-native-flatlist

【解决方案1】：

我进行了一些更改，并将您的平面列表设为多选。请访问此link。

为了使它成为多选，我做了以下更改：

在 state 中添加了虚拟数据并将其传递给 flatlist 的数据。
在项目按下迭代数据和对应的项目集item.selected=true。
如果 item.selected==true 在 flatlist 的 renderItem 中，则显示选择，否则删除选择。

请检查并告诉我。

【讨论】：

你能给我举个例子吗？我需要选择多个组件。
我故意没有编写代码，以便您可以轻松编写代码并理解我的答案逻辑。你的意思是我的多个组件？ flatlist 中的任何项目都是通用组件，对吧？
我在数组中有多个数据，所以我需要选择多个组件。在平面列表文档中，它显示了如何选择多个数据，但很难理解。
您能否编辑问题并举例说明您的平面列表项目将如何详细说明，因为根据您的问题，它似乎只是一个平面列表。
所选项目的ID。我无法从renderData获取值

【解决方案2】：

检查这个逻辑，

 ...
     this.state = {
          clientsArray: clientsArray,
          selectedClients: []
        };
    //'clientsArray' is your data array
 ...

  _renderCell = ({ item, index }) => {
    const { selectedClients, clientsArray } = this.state;
    let isSelected =
      selectedClients.filter(o => {
        return o.id === item.id;
      }).length > 0
        ? true
        : false;

   //change your UI based on the 'isSelected' value
   return (
      <TouchableOpacity
        activeOpacity={Constants.ACTIVE_OPACITY}
        onPress={() => {
          this._didSelectClient(item);
        }}
      >
       {
         //Your component
       }
      </TouchableOpacity>
 }


_didSelectClient = selectedItem => {
    let selectedClients = this.state.selectedClients;
    let isItemSelected =
      selectedClients.filter(item => {
        return item.id.includes(selectedItem.id);
      }).length > 0
        ? true
        : false;

    if (isItemSelected) {
      const index = selectedClients.findIndex(
        obj => obj.id === selectedItem.id
      );
      selectedClients.splice(index, 1);
    } else {
      selectedClients.push(selectedItem);
    }

    this.setState({ selectedClients });
  };

render() {
    ...
    <FlatList
     style={{ flex: 1 }}
     data={clientsArray}
     renderItem={this._renderCell}
     keyExtractor={(item, index) => index.toString()}
     extraData={this.props}
     ListEmptyComponent={this._renderEmptyComponent}
    />
    ...
}

【讨论】：