長いプレスの上で反応するネイティブのマルチ選択－触れることの不透明度.

あなたはどのように選択したり、ネイティブの反応の中に複数の項目を選択解除を知ってほしいですか.では、どのように使用できるかを見てみましょうTouchableOpacity and onLongPress .

このプロジェクトのために私は裸の反応ネイティブCLIを使用していますが、それも万博CLIで動作します.
あなたはこの同じポストをチェックアウトすることができますndpniraj

我々がこのポストでカバーする内容.

プロジェクトの展望

プロジェクトの初期化

プロジェクトに形を与える

ListItemコンポーネントの作成

すべての論理を追加する

セカンドタップ

プロジェクトの展望
我々の反応ネイティブのマルチ選択プロジェクトの任意のコードを書く前に、私たちが望むものを理解し、どのように我々の目標を達成することができます.
我々が我々のプロジェクトの中に加えたい特徴は、それです.

ユーザーがちょうどリストアイテムをタップするならば、我々は開いているか、異なる構成要素に移動したいです.

ユーザーがタップし、指を保持する場合は、リストの項目を選択し、複数の選択オプションを有効にします.

また、ユーザーが外部または空のスペースでタップする場合は、すべてを選択解除します.

プロジェクトを初期化する
プロジェクトを初期化できますnpx react-native init MultipleSelect あなたが私のように反応するネイティブのCLIを使用しているならばexpo init または、この複数の選択オプションを追加する既存の反応ネイティブプロジェクトを使用できます.
あなたのプロジェクトを初期化した後は、エミュレータの内部または物理的なデバイス内で実行することができますし、それを行う方法を私に尋ねるしないでくださいので、すでにプロです.

形状付与
この複数の選択オプションを作成するには、偽の名前と連絡先番号を使用していくつかの偽のデータを使用します.また、下記の例(ページの最後)からコピーすることもできます.

...
const App = () => {
  return (
    <Pressable>
      <FlatList
        data={data}
        renderItem={({item}) =><Text>{item.name}</Text>}
        keyExtractor={item => item.id}
      />
    </Pressable>
  );
};
...

BrosとSISを心配しないで、私にここで起こっていることを説明させてください.ここではFlastlistのコンポーネントを使用して、偽のデータをレンダリングし、私はすでにどのように動作を知ってほしい.データのように、RenderItemとすべて.
その後、新しいものの中でflatlistコンポーネントを包んでいるということですPressable コンポーネント.リストの外側をタップすると、すべての選択を選択解除したいからです.それは触れることができる構成要素のようです、しかし、それは反応するネイティブの家族の中の新しいものです.

ListItemコンポーネントの作成
これらのリスト項目をレンダリングし、いくつかのスタイルを追加するには、美しいコンポーネントを作成します.

...
const ListItem = ({item, selected, onPress, onLongPress}) => (
  <>
    <TouchableOpacity
      onPress={onPress}
      onLongPress={onLongPress}
      style={styles.listItem}>
      <View style={{padding: 8}}>
        <Text style={{fontSize: 22, color: '#fff'}}>{item.name}</Text>
        <Text style={{color: '#989BA1'}}>{item.contact}</Text>
      </View>
      {selected && <View style={styles.overlay} />}
    </TouchableOpacity>
  </>
);

const App = () => {
  const handleOnPress = () => console.log('pressed');
  const handleLongPress = () => console.log('activete long press');

  return (
    <Pressable style={{flex: 1, padding: 15}}>
      <FlatList
        data={data}
        renderItem={({item}) => (
          <ListItem
            onPress={handleOnPress}
            onLongPress={handleLongPress}
            item={item}
          />
        )}
        keyExtractor={item => item.id}
      />
    </Pressable>
  );
};
...

ここでは、私たちのリストアイテムをレンダリングするためにこの美しいListItemコンポーネントを持っています、そして、我々が我々の秘密の仕事をすることができるように、我々はTouchableOpacityを使っています.ちょうど冗談、それはユーザーのタッチイベントを聞くためにここにある.
このListItemコンポーネントの内部ではっきりとわかるように、私たちは、選択、onpress、onlongpressプロップを受け入れています.
アイテムは、我々がここで提出する名前と接触のようなデータによる実際のアイテムです.選択した条件は、我々のリスト項目の上にオーバーレイを表示するために使用されます.
このオーバーレイは、位置の絶対値、高さと幅100 %と半分の不透明度と色だけでビューコンポーネントです.他のコードの残りは、私自身が説明すると思います.
現在、我々のプロジェクトはこのように見えます.

今、我々はマルチ選択オプションを追加できるように我々のプロジェクトの中にSelectedItemsと呼ばれる状態を追加します.好きな名前を自由に使ってください.
その後、onpressとonlongpress propを添付し、どのリスト項目が現在押されているかを知りたいので、インライン関数を使用し、例のような現在の項目を例に渡します.

...
 <FlatList
   data={data}
   renderItem={({item}) => (
     <ListItem
     onPress={() => handleOnPress(item)}
     onLongPress={() => handleLongPress(item)}
     selected={getSelected(item)}     
     item={item}
     />
  )}
...

また、選択した={ getselected ( item )} }に気づくかもしれません.リスト項目が選択されている場合、オーバーレイするレンダリングを見つけることです.

すべての論理を追加する

...
const App = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleLongPress = contact => {
    selectItems(contact)
  };

  const handleOnPress = contact => {
    if (selectedItems.length) {
      return selectItems(contact)
    }

    // here you can add you code what do you want if user just do single tap
    console.log('pressed');
  };

  const getSelected = contact => selectedItems.includes(contact.id);

  const deSelectItems = () => setSelectedItems([]);

  const selectItems = (item) => {
    setSelectedItems([...selectedItems, item.id]);
  }
...

ここでは、我々は我々の反応ネイティブアプリの中に複数の項目を選択するためにすべてを持っているこの例の中に実際の魔法の男が来る.
最初に、我々はこれを持ちますselectedItems 最初に何かを選択したくないので、状態とデフォルト値は明らかに空の配列です.
あなたがこのコードブロックの終わりに来るならば、我々は方法と呼ばれていますselectItems . このメソッドの中で、我々はちょうどアイテムを受け入れて、そのアイテムのIDを内部に保存しますselectedItems 配列.
それから私たちはhandleLongPress and handleOnPress メソッドも.
内部handleLongPress 私たちはちょうどselectItems メソッド.そのため、このHandlExpressを削除して直接使用することができますselectItems メソッド内部onLongPress プロップあなたは最終的なコードの中を見つける.
内部handleOnPress いくつかの選択された項目が既に選択されているかどうかをチェックしています.しかし、もしそうでなければ、コンソールログとコメントを見ることができます.好きなことは何でもできる.
それから別の方法がありますgetSelected このメソッドの内部では、現在の項目が既に内部にあるかどうかをチェックしていますselectedItems かどうか.を返します.
それから、我々はdeSelectItems そして、このメソッドの中でselectedItems 空の配列への状態.そして、このメソッドをPressable コンポーネントonPress プロップ

セカンドタップ
コードのこれらの行を使用すると、複数の項目を選択しますが、選択したものを選択解除する場合は何もしないでしょう.だから、我々は更新する必要がありますselectItems メソッド.下記のように.

 const selectItems = item => {
    if (selectedItems.includes(item.id)) {
      const newListItems = selectedItems.filter(listItem => listItem !== item.id);
      return setSelectedItems([...newListItems]);
    }
    setSelectedItems([...selectedItems, item.id]);
  };

今ここに我々は更新されているselectItems メソッド.我々が最初にチェックしているところでは、現在タップされたアイテムが既にselectedItems 配列.
はいならば、我々はそれからそれを取り除きますselectedItems Array Filterメソッドを使用してコード実行を返すリスト.そうでなければ、我々はリストアイテムを我々の中に加えていますselectedItems 状態.
今、我々は我々の最終的なプロジェクトを作りました.マルチは、ネイティブの反応を使用して選択します.今すぐ使用することができますselectedItems 必要に応じて他のコンポーネントをレンダリングする状態.
あなたが任意のオプションを開く場合は、削除するアイコンや何かを使用することができますしたい場合は削除しますselectedItems.length それからこれをしなさい.
これはこのポストです.完全なコードです.

import React, {useState} from 'react';
import {
  StyleSheet,
  FlatList,
  Pressable,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

const data = [
  {name: 'Rohan', contact: '1111111111', id: '1'},
  {name: 'Mohan', contact: '2222222222', id: '2'},
  {name: 'Sohan', contact: '3333333333', id: '3'},
  {name: 'Hohan', contact: '4444444444', id: '4'},
  {name: 'Dohan', contact: '5555555555', id: '5'},
  {name: 'Pohan', contact: '6666666666', id: '6'},
];

const ListItem = ({item, selected, onPress, onLongPress}) => (
  <>
    <TouchableOpacity
      onPress={onPress}
      onLongPress={onLongPress}
      style={styles.listItem}>
      <View style={{padding: 8}}>
        <Text style={{fontSize: 22, color: '#fff'}}>{item.name}</Text>
        <Text style={{color: '#989BA1'}}>{item.contact}</Text>
      </View>
      {selected && <View style={styles.overlay} />}
    </TouchableOpacity>
  </>
);

const App = () => {
  const [selectedItems, setSelectedItems] = useState([]);
  const handleOnPress = contact => {
    if (selectedItems.length) {
      return selectItems(contact);
    }

    // here you can add you code what do you want if user just do single tap
    console.log('pressed');
  };

  const getSelected = contact => selectedItems.includes(contact.id);

  const deSelectItems = () => setSelectedItems([]);

  const selectItems = item => {
    if (selectedItems.includes(item.id)) {
      const newListItems = selectedItems.filter(
        listItem => listItem !== item.id,
      );
      return setSelectedItems([...newListItems]);
    }
    setSelectedItems([...selectedItems, item.id]);
  };

  return (
    <Pressable onPress={deSelectItems} style={{flex: 1, padding: 15}}>
      <FlatList
        data={data}
        renderItem={({item}) => (
          <ListItem
            onPress={() => handleOnPress(item)}
            onLongPress={() => selectItems(item)}
            selected={getSelected(item)}
            item={item}
          />
        )}
        keyExtractor={item => item.id}
      />
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {},
  listItem: {
    backgroundColor: '#252628',
    marginBottom: 10,
    borderRadius: 5,
    overflow: 'hidden',
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(255,0,0,0.5)',
  },
});

export default App;