web-dev-qa-db-ja.com

FlatListでアイテムをマルチ選択する方法

Reactネイティブフラットリスト内のコンポーネントを選択して強調表示する方法。私は doc をチェックしました。しかし、それは少し混乱しています誰かが私を助けてくれることができます。私はこの方法を使ってシングル選択をしました。これをMulti Select.Iに変更することはありません。ここでスナックリンクを入力します 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({

});
 _

これはサンプルデータです

react-nativereact-native-flatlist
4
user8583769

私はいくつかの変更を加えて、あなたのフラットリストをマルチサイトにしました。これにアクセスしてください link 。

これをマルチ選択として作成するための変更を下回った：

  • DUMMYデータを状態に追加し、それをFlatListのデータに渡しました。
  • アイテムの場合は、データを押します。データを押して対応する項目セット_item.selected=true_です。
  • _item.selected==true_の場合、フラットリストのRenderItemの内部で選択が選択されて選択を削除します。

確認して私に知らせてください。

1
Tejas