如何在反应本机中使用平面列表实现多选

Question

我正在尝试创建一个带有文本的平面列表，但它只选择单个值，但我想从列表中选择多个值。 而且我还需要更改所选项目的颜色。在这里，我正在从 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}
      />
)
}
}

选项.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 在此平面列表中实现多选？有人可以帮助我解决这个问题吗？

Answer 1

查看官方文档中的多选平面列表示例。列表项是具有自己的状态和属性的组件。每当列表组件收到单击时，您都可以将它们传递下来，并通过条件渲染执行一些魔术。