Как реализовать множественный выбор с помощью Flatlist в реагировать на нативный?

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}
      />
)
}
}

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>
);
};
}

Как мне реализовать множественный выбор в этом плоском списке, используя реагировать нативно?Может кто-нибудь помочь мне решить эту проблему?

Answer 1

Ознакомьтесь с примером multi-select-flatlist из официальных документов.ListItems - это компоненты с собственным состоянием и реквизитом.Вы можете передавать их каждый раз, когда ваш компонент List получает щелчок, и совершать магию с условным рендерингом.