Skaalakoristeen toteuttaminen React Native -ohjelmiston Draggable FlatListissä

Visuaalisesti vuorovaikutteisen ja käyttäjäystävällisen kokemuksen luominen on avainasemassa, kun halutaan mobiilisovellusten kehittäminen. React Nativen FlatList on erittäin monipuolinen ja tehokas, ja sitä käytetään yleisesti suurten listojen esittämiseen. Vedä ja pudota -toiminnallisuuden avulla voit tehdä FlatLististäsi entistäkin kiinnostavamman. Tässä artikkelissa tarkastelemme, miten React Native -ohjelmassa voidaan toteuttaa raahattavissa oleva FlatList, jossa on myös skaalauskoriste, joka saa kohteet ponnahtamaan esiin ja reagoimaan kosketukseen.

Edellytykset

Varmista ennen aloittamista, että sinulla on perustiedot React Native -ohjelmasta ja jonkin verran perehtyneisyyttä animaatioihin vuonna React Native. Sinun on myös asennettava seuraavat kirjastot:

1. react-native-reanimated - animaatioita varten.
2. react-native-gesture-handler - kosketuseleiden käsittelyä varten.
3. react-native-draggable-flatlist - raahattavien listojen toiminnallisuutta varten.

npm install react-native-reanimated react-native-gesture-handler react-native-draggable-flatlist

Vaihe 1: Määritä Draggable FlatList -luettelo

Aloita tuomalla tarvittavat komponentit ja perustamalla yksinkertainen vedettävä ja raahattava FlatList.

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist';

const data = Array.from({ length: 10 }, (v, i) => ({
    key: `item-${i}`,
    label: `Kohde ${i + 1}`,
}));

const DraggableList = () => { {
    const [items, setItems] = React.useState(data);
    const renderItem = ({ item, drag, isActive }) => {
        return (
            
                
                    
                        {item.label}
                    
                
            
        );
    };
    return (
         setItems(data)}
            keyExtractor={(item) => item.key}
            renderItem={renderItem}
        />
    );
};
export default DraggableList;

Näin tapahtuu:

1. Data Array: Asetamme luettelossa esitettävien kohteiden joukon.
2. DraggableFlatList Komponentti: Tämä tekee luettelon, jossa kohteita voi raahata.
3. Renderöi kohde: Jokainen kohde näyttää tekstiä ja käyttää vedä renderöintitekijästä, jotta raahaaminen on mahdollista pitkällä painalluksella.
4. ScaleDecorator: Kietoo jokaisen luettelon kohteen ja antaa skaalausvaikutuksen, kun se on aktiivinen.

Vaihe 2: Sovella Scale Decoratoria

The ScaleDecorator alkaen react-native-draggable-flatlist on tehokas väline, jolla voidaan antaa visuaalista palautetta kohteen valinnasta. Asetukset activeScale ohjaa mittakaavan kokoa, kun kohdetta vedetään.

<ScaleDecorator activeScale={1.1}>

Tässä esimerkissä asetus activeScale={1.1} skaalaa kohteen 110% sen alkuperäisestä koosta, kun se on aktiivinen. Säädä skaalauskerrointa tarpeen mukaan käyttöliittymääsi varten.

Vaihe 3: Lisää mukautettuja tyylejä

Paranna ulkoasua ja vuorovaikutusta lisäämällä joitakin mukautettuja tyylejä.

const styles = StyleSheet.create({
  itemContainer: {
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  text: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

Nämä tyylit määrittelevät pehmusteen, marginaalin ja perusvärit, jotka antavat jokaiselle kohteelle kortin kaltaisen ulkoasun.

Vaihe 4: Animaatiot react-native-reanimated (Valinnainen)

Jos haluat enemmän kontrollia skaalaukseen tai haluat animoida muita ominaisuuksia raahauksen aikana, harkitse integroimista react-native-reanimated. Tässä on nopea esimerkki siitä, miten saavutetaan tasainen sisään- ja ulosskannaustehoste käyttämällä apuna Reanimoitu.

1. Asenna Reanimated ja tuo se.
2. Kääri jokainen tuote Animated.View, jossa asteikon arvo muuttuu raahaustilan mukaan.

import Animated, { useAnimatedStyle, withSpring } from ‘react-native-reanimated’;

const renderItem = ({ item, drag, isActive }) => {
  const scale = isActive ? withSpring(1.1) : withSpring(1);
  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ { scale }],
  }));

  return (
    >
      
        {item.label}
      
    
  );
};

Testaus ja vianmääritys

Suorita sovellus laitteella tai emulaattorilla ja testaa raahaa ja pudota -toimintoa painamalla ja pitämällä kohdetta painettuna ja siirtämällä sitä sitten ympäriinsä.

Vinkkejä

• Kokeile activeScale osoitteessa ScaleDecorator ihanteellisen asteikon osalta.
• Säädä kohteen pehmusteita ja marginaaleja luodaksesi ulkoasun, joka sopii suunnittelullesi.
• Käytä withSpring() Reanimated-ohjelmassa, jotta siirtyminen skaalasta toiseen olisi sujuvaa.

Johtopäätös

Raahattavissa olevan elementin lisääminen FlatList asteikkokoristeen kanssa osoitteessa React Native parantaa käyttäjän vuorovaikutusta antamalla visuaalista palautetta ja luomalla saumattoman vedä ja pudota -kokemuksen. Olipa kyseessä sitten tehtävälista, tehtävienhallinta tai jopa uudelleenjärjestelyn käyttöliittymä, skaalauskoriste saa sovelluksen tuntumaan hiotulta ja reagoivalta.

Yhdistämällä react-native-draggable-flatlist, ScaleDecorator, ja valinnaisten Reanimated-animaatioiden avulla voit luoda dynaamisen ja interaktiivisen listan, joka erottuu edukseen. Nyt olet valmis toteuttamaan vetovoimaisen, raahausystävällisen luettelon, jota käyttäjät rakastavat!