如何在 React Native 中使用 Flatlist 实现多选？答案

【问题标题】：How to implement multiselect using Flatlist in react native?如何在 React Native 中使用 Flatlist 实现多选？
【发布时间】：2019-02-01 08:35:53
【问题描述】：

我正在尝试使用文本创建一个平面列表，但它只选择单个值，但我想从列表中选择多个值。我还需要为所选项目更改颜色。这里我从 api 获取数据。这是我的代码：

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";    
import { FlatList } from "react-native";
import {
stepDone,
setInputData,
} from "../../actions";
import Options from "../../components/Options";<----- It is a component Here define the flatlist

class Qualifier extends React.Component {

_afterQualifierSelected = (id, name) => {
const { stepDone, setInputData, input, updateSymptom } = this.props,
  symptomId = input.symptomIds[input.symptomIds.length - 1],
  currentSymptom = input.symptoms.filter(entry => entry.id === symptomId),
  symptom = currentSymptom ? currentSymptom[0] : {};

symptom.qualifier = id;

setInputData("qualifier", { id, name });
stepDone("qualifierSelected");
};

render = () => {
return (
      <Options
         data={this.qualifiers}
         exclusive={true}
         onSelect={this._afterQualifierSelected}
      />
)
}
}

options.js

 export default class Options extends React.PureComponent {
 static propTypes = {
 data: PropTypes.array.isRequired,
 extraData: PropTypes.object,
 exclusive: PropTypes.bool.isRequired,
 onSelect: PropTypes.func.isRequired,
 onDone: PropTypes.func
};

  _keyExtractor = (item, index) =>
   "undefined" === typeof item.id
  ? index.toString()
  : "string" === typeof item.id
  ? item.id
  : item.id.toString();

 _renderItem = ({ item }) => {
const { onSelect } = this.props;
return <Item id={item.id} text={item.name} onPress={onSelect} />;
 };

render = () => {
const { data, extraData, exclusive, onDone } = this.props;
return (
  <View style={styles.container}>
    <View style={styles.listContainer}>
      <FlatList
        data={data}
        extraData={extraData}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    </View>
    {!exclusive && (
      <Button
        style={styles.done}
        onPress={onDone}
        title={Language.done}
        accessibilityLabel={Language.optionsDoneAccessibility}
      />
    )}
  </View>
);
};
}

我应该如何使用 react native 在这个平面列表中实现多选？有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript react-native ecmascript-6 react-redux

【解决方案1】：

查看官方文档中的multi-select-flatlist 示例。 ListItems 是具有自己的状态和道具的组件。每当您的 List 组件收到点击时，您都可以将它们传递下去，并通过条件渲染来做一些魔术。

【讨论】：

能给我一份样品吗？
该链接包含 ListItem 和 Flatlist (MultiSelectList) 的完整示例。如果选中，它甚至会更改 ListItem 的颜色。