🤶🏿 🚞 ⭐️ प्रतिक्रियाशील मूल: एक खींचें और स्वाइप करने योग्य सूची बनाएं 👶🏽 🥣 🦑

आज मोबाइल एप्लिकेशन में सूची आइटम स्वाइप करने की क्षमता के साथ किसी को भी आश्चर्यचकित करना मुश्किल है। हमारे प्रतिक्रिया-मूल अनुप्रयोगों में से एक में ऐसी कार्यक्षमता भी थी, लेकिन हाल ही में सूची आइटमों को खींचने और छोड़ने की क्षमता के साथ इसका विस्तार करने की आवश्यकता थी। और चूंकि समाधान खोजने की प्रक्रिया ने मुझे तंत्रिका कोशिकाओं की एक निश्चित राशि खर्च की, इसलिए मैंने भविष्य की पीढ़ियों के लिए मूल्यवान समय बचाने के लिए एक छोटा लेख दर्ज करने का फैसला किया।

हमारे आवेदन में, हमने react-native-swipe-list-view करने योग्य सूची बनाने के लिए react-native-swipe-list-view पैकेज का उपयोग किया। पहले सोचा था कि ड्रैग'नहलड्रॉप कार्यक्षमता के साथ कुछ पैकेज लिया जाए और सांप के साथ हाथी को पार किया जाए।

इंटरनेट की एक खोज ने तीन अभ्यर्थियों को दिया: react-native-draggable-list , react-native-sortable-list react-native-draggable-flatlist react-native-sortable-list और react-native-draggable-flatlist ।

पहले पैकेज का उपयोग करना, संलग्न उदाहरण को भी चलाने के लिए संभव नहीं था (हालांकि, न केवल मेरे लिए, इसी मुद्दे को मुद्दों में संकेत दिया गया है )।

मुझे दूसरे पैकेज के साथ टिंकर करना था, लेकिन मैं एक ड्रैगेबल और स्वाइपेबल सूची बनाने में कामयाब रहा। हालांकि, परिणाम प्रेरित नहीं था - घटक बेशर्मी से निमिष कर रहा था: रेड्रा के निमिष, सूची से परे तत्वों का गिरना, या यहां तक कि उनके लापता होने का भी। यह स्पष्ट हो गया कि इस रूप में इसका उपयोग नहीं किया जा सकता है।

सबसे पहले, आखिरी पैकेज में भी एक कैप्रिक महिला की तरह व्यवहार किया गया था, लेकिन फिर यह पता चला कि मुझे यह नहीं पता था कि इसे कैसे पकाना है। इस "महिला" के दिल की एक चाबी लेने के बाद, मैं एक स्वीकार्य परिणाम हासिल करने में कामयाब रहा।

हमारी परियोजना में, एक स्वाइप करने योग्य सूची थी, जिसके लिए आपको ड्रैग और ड्रॉप को फास्ट करना होगा, लेकिन व्यवहार में दूसरे किनारे से शुरू करना बेहतर है: पहले एक ड्रैग करने योग्य सूची बनाएं और फिर स्वाइप करने की क्षमता जोड़ें।

पाठकों को यह जानना चाहिए कि प्रतिक्रिया-मूलक परियोजना कैसे बनाई जाए, तो चलिए उस सूची को बनाने पर ध्यान दें जिसकी हमें आवश्यकता है। नीचे चर्चा की गई उदाहरण टाइपस्क्रिप्ट कोड है।

एक खींचने योग्य सूची बनाना

तो, चलो पैकेज स्थापित करके शुरू करें:

 yarn add react-native-draggable-flatlist

हम आवश्यक मॉड्यूल आयात करते हैं:

 import React, { Component } from 'react' import { View } from 'react-native' import styles from './styles' import DraggableFlatList, { RenderItemInfo, OnMoveEndInfo } from 'react-native-draggable-flatlist' import ListItem from './components/ListItem' import fakeData from './fakeData.json'

यहां DraggableFlatList स्थापित पैकेज से एक घटक है जो ड्रैग और ड्रॉप ListItem लागू ListItem , ListItem एक सूची आइटम (कोड नीचे प्रस्तुत किया जाएगा) प्रदर्शित करने के लिए हमारा घटक है, फर्जी डेटा एक जाली फ़ाइल है जो नकली डेटा है - इस मामले में, प्रपत्र की वस्तुओं की एक सरणी:

 {"id": 0, "name": "JavaScript", "favorite": false}

एक वास्तविक एप्लिकेशन में, यह डेटा सबसे अधिक संभावना है कि आप प्रॉम्प्ट से आपके कंपोनेंट में आएंगे या नेटवर्क से डाउनलोड किए जाएंगे, लेकिन हमारे मामले में हम थोड़े से रक्त के साथ प्रबंधन करेंगे।

चूंकि टाइपस्क्रिप्ट का उपयोग इस उदाहरण में किया जाता है, इसलिए हम कुछ संस्थाओं का वर्णन करते हैं:

 type Language = { id: number, name: string, favorite: boolean, } interface AppProps {} interface AppState { data: Array<Language> }

Language प्रकार हमें बताता है कि सूची आइटम में कौन से फ़ील्ड होंगे।

इस उदाहरण में, हमें AppProps से कुछ भी नहीं मिलेगा, इसलिए AppProps इंटरफ़ेस तुच्छ है, और कहानी में हम Language ऑब्जेक्ट्स की एक सरणी को संग्रहीत करेंगे, जो कि AppState इंटरफ़ेस में इंगित किया गया है।

चूंकि घटक कोड बहुत बड़ा नहीं है, इसलिए मैं इसे इसकी संपूर्णता में दूंगा:

ऐप कंपोनेंट कोड

 class App extends Component<AppProps, AppState> { constructor(props: AppProps) { super(props) this.state = { data: fakeData, } } onMoveEnd = ({ data }: OnMoveEndInfo<Language>) => { this.setState({ data: data ? [...data] : [] }) } render() { return ( <View style={styles.root}> <DraggableFlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={(item) => item.id.toString()} scrollPercent={5} onMoveEnd={this.onMoveEnd} /> </View> ) } renderItem = ({ item, move, moveEnd, isActive }: RenderItemInfo<Language>) => { return ( <ListItem name={item.name} move={move} moveEnd={moveEnd} isActive={isActive} /> ) } }

जब आइटम को ले जाया जाता है, तो onMoveEnd विधि onMoveEnd कहा जाता है। इस मामले में, हमें राज्य में तत्वों के नए आदेश के साथ सूची को डालने की आवश्यकता है, इसलिए हम इस। this.setState विधि को कहते हैं।

renderItem विधि एक सूची आइटम renderItem है और RenderItemInfo <Language> प्रकार का ऑब्जेक्ट स्वीकार करती है। इस ऑब्जेक्ट में निम्न फ़ील्ड शामिल हैं:

item - सूची में डेटा के रूप में पारित सरणी का अगला तत्व,
move और moveEnd ऐसे फंक्शन्स हैं, जिन्हें लिस्ट आइटम ले जाने पर कॉल किया जाता है, तो DraggableFlatList कंपोनेंट इन फंक्शन्स को प्रदान करता है,
isActive एक बूलियन फ़ील्ड है जो यह निर्धारित करता है कि आइटम वर्तमान में isActive करने योग्य है या नहीं।

सूची आइटम प्रदर्शित करने के लिए घटक, वास्तव में, TouchableOpacity , जो जब लंबे समय तक दबाया जाता है, तो कॉल move , और जब जारी किया जाता है, तो यह moveEnd ।

ListItem घटक कोड

 import React from 'react' import { Text, TouchableOpacity } from 'react-native' import styles from './styles' interface ListItemProps { name: string, move: () => void, moveEnd: () => void, isActive: boolean, } const ListItem = ({ name, move, moveEnd, isActive }: ListItemProps) => { return ( <TouchableOpacity style={[styles.root, isActive && styles.active]} onLongPress={move} onPressOut={moveEnd} > <Text style={styles.text}>{name}</Text> </TouchableOpacity> ) } export default ListItem

सभी घटकों के लिए शैलियों को अलग-अलग फ़ाइलों में ले जाया जाता है और यहां नहीं दिया जाता है, लेकिन उन्हें भंडार में देखा जा सकता है ।

परिणामी परिणाम:

स्वाइप करने की क्षमता जोड़ें

खैर, हम पहले भाग के साथ सफलतापूर्वक मुकाबला कर चुके हैं, हम मार्लेज़ोन बैले के दूसरे भाग के लिए आगे बढ़ते हैं।

सूची आइटम स्वाइप करने की क्षमता जोड़ने के लिए, हम react-native-swipe-list-view पैकेज का उपयोग करते हैं।

आरंभ करने के लिए, आइए इसे स्थापित करें:

 yarn add react-native-swipe-list-view

इस पैकेज में SwipeRow घटक है, जो प्रलेखन के अनुसार, दो घटक शामिल होना चाहिए:

 <SwipeRow> <View style={hiddenRowStyle} /> <View style={visibleRowStyle} /> </SwipeRow>

ध्यान दें कि पहला दृश्य दूसरे के तहत खींचा गया है।

चलिए ListItem घटक का कोड बदलते हैं।

ListItem घटक कोड

 import React from 'react' import { Text, TouchableOpacity, View, Image } from 'react-native' import { SwipeRow } from 'react-native-swipe-list-view' import { Language } from '../../App' import styles from './styles' const heart = require('./icons8-heart-24.png') const filledHeart = require('./icons8-heart-24-filled.png') interface ListItemProps { item: Language, move: () => void, moveEnd: () => void, isActive: boolean, onHeartPress: () => void, } const ListItem = ({ item, move, moveEnd, isActive, onHeartPress }: ListItemProps) => { return ( <SwipeRow rightOpenValue={-180}> <View style={styles.hidden}> <TouchableOpacity onPress={onHeartPress}> <Image source={item.favorite ? filledHeart : heart} /> </TouchableOpacity> </View> <TouchableOpacity activeOpacity={1} style={[styles.root, isActive && styles.active]} onLongPress={move} onPressOut={moveEnd} > <Text style={styles.text}>{item.name}</Text> </TouchableOpacity> </SwipeRow> ) } export default ListItem

सबसे पहले, हमने SwipeRow संपत्ति के साथ SwipeRow घटक को जोड़ा, जो उस दूरी को निर्धारित करता है जिस पर तत्व को स्वाइप किया जा सकता है।

दूसरे, हमने अपने SwipeRow को SwipeRow अंदर SwipeRow और एक व्यू जोड़ा, जो इस बटन के नीचे खींचा जाएगा।

इस दृश्य के अंदर, यह निर्धारित करने के लिए एक चित्र तैयार किया जाता है कि भाषा पसंदीदा है या नहीं। जब आप उस पर क्लिक करते हैं, तो मान उलटा होना चाहिए, और चूंकि डेटा मूल घटक में है, इसलिए आपको यहां कॉलबैक फेंकने की आवश्यकता है जो इस क्रिया को करता है।

मूल घटक में आवश्यक परिवर्तन करें:

ऐप कंपोनेंट कोड

 import React, { Component } from 'react' import { View } from 'react-native' import styles from './styles' import DraggableFlatList, { RenderItemInfo, OnMoveEndInfo } from 'react-native-draggable-flatlist' import ListItem from './components/ListItem' import fakeData from './fakeData.json' export type Language = { id: number, name: string, favorite: boolean, } interface AppProps {} interface AppState { data: Array<Language> } class App extends Component<AppProps, AppState> { constructor(props: AppProps) { super(props) this.state = { data: fakeData, } } onMoveEnd = ({ data }: OnMoveEndInfo<Language>) => { this.setState({ data: data ? [...data] : [] }) } toggleFavorite = (value: Language) => { const data = this.state.data.map(item => ( item.id !== value.id ? item : { ...item, favorite: !item.favorite } )) this.setState({ data }) } render() { return ( <View style={styles.root}> <DraggableFlatList data={this.state.data} renderItem={this.renderItem} keyExtractor={(item) => item.id.toString()} scrollPercent={5} onMoveEnd={this.onMoveEnd} /> </View> ) } renderItem = ({ item, move, moveEnd, isActive }: RenderItemInfo<Language>) => { return ( <ListItem item={item} move={move} moveEnd={moveEnd} isActive={isActive} onHeartPress={() => this.toggleFavorite(item)} /> ) } } export default App

GitHub पर परियोजना के स्रोत।

परिणाम नीचे प्रस्तुत किया गया है:

प्रतिक्रियाशील मूल: एक खींचें और स्वाइप करने योग्य सूची बनाएं

एक खींचने योग्य सूची बनाना

स्वाइप करने की क्षमता जोड़ें

More articles: