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

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

Answer 1

从官方文档查看multi-select-flatlist示例。该listItems中与自己的状态和道具部件。只要您的List组件获得点击，就可以将它们传递下来，并通过条件渲染进行一些魔术操作。

如何在React Native中使用Flatlist实现多重选择？

1 个答案: