Implementazione di un decoratore di scala in un elenco piatto trascinabile in React Native

Creare un'esperienza visivamente interattiva e di facile utilizzo è fondamentale per sviluppo di app mobili. FlatList di React Native è molto versatile ed efficiente, comunemente utilizzato per il rendering di elenchi di grandi dimensioni. Con l'aggiunta della funzionalità di trascinamento, è possibile rendere la FlatList ancora più accattivante. In questo articolo esploreremo come implementare una FlatList trascinabile in React Native, completa di un decoratore di scala per far apparire gli elementi e rispondere al tocco.

Prerequisiti

Prima di iniziare, assicuratevi di avere una conoscenza di base di React Native e una certa familiarità con le animazioni in Reagire nativo. È inoltre necessario installare le seguenti librerie:

1. reagire-nativo-animato - per le animazioni.
2. gestori di gesti reagenti-nativi - per la gestione dei gesti tattili.
3. react-native-draggable-flatlist - per la funzionalità di elenco trascinabile.

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

Passo 1: Impostazione dell'elenco piatto trascinabile

Si inizia importando i componenti necessari e configurando un semplice elemento trascinabile Elenco piatto.

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

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

const DraggableList = () => {
    const [items, setItems] = React.useState(data);
    const renderItem = ({ item, drag, isActive }) => {
        return (
            
                
                    
                        {item.label}
                    
                
            </ScaleDecorator
        );
    };
    restituire (
         setItems(dati)}
            keyExtractor={(item) => item.key}
            renderItem={renderItem}
        />
    );
};
esportazione predefinita di DraggableList;

Ecco cosa sta succedendo:

1. Array di dati: Impostiamo un array di elementi da rendere nell'elenco.
2. Elenco scorrevole Componente: Visualizza un elenco in cui gli elementi possono essere trascinati.
3. Rendering dell'elemento: Ogni voce visualizza il testo e utilizza trascinare dal prop. di rendering per consentire il trascinamento alla pressione prolungata.
4. ScalaDecoratore: Avvolge ogni elemento dell'elenco e fornisce un effetto di scalatura quando è attivo.

Passo 2: applicare il decoratore di scala

IL ScalaDecoratore da react-native-draggable-flatlist è un potente strumento per fornire un feedback visivo sulla selezione degli elementi. Impostazione scala attiva controlla la dimensione della scala quando un elemento viene trascinato.

<ScaleDecorator activeScale={1.1}>

In questo esempio, l'impostazione activeScale={1.1} ridimensiona l'elemento a 110% della sua dimensione originale quando è attivo. Regolare il fattore di scala come necessario per l'interfaccia utente.

Passo 3: Aggiungere stili personalizzati

Migliorate l'aspetto e l'interazione aggiungendo alcuni stili personalizzati.

const styles = StyleSheet.create({
  itemContainer: {
    padding: 20,
    margineVerticale: 8,
    margineorizzontale: 16,
    raggio del bordo: 8,
    larghezza del bordo: 1,
    borderColor: '#ddd',
  },
  testo: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

Questi stili definiscono il padding, il margine e i colori di base, dando a ogni elemento un aspetto simile a quello di un biglietto.

Passo 4: Animazioni con reagire-nativo-animato (Opzionale)

Se si desidera un maggiore controllo sul ridimensionamento o si vuole animare altre proprietà durante il trascinamento, si consideri l'integrazione di reagire-nativo-animato. Ecco un rapido esempio di come ottenere un effetto di scale-in e scale-out omogeneo con Rianimato.

1. Installare Reanimated e importarlo.
2. Avvolgere ogni articolo in un Animato.Vista, dove il valore della scala cambia in base allo stato di trascinamento.

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

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

  return (
    
      
        {item.label}
      
    </Animated.View
  );
};

Test e risoluzione dei problemi

Eseguite l'applicazione su un dispositivo o un emulatore e testate la funzionalità di trascinamento tenendo premuto un elemento e spostandolo.

Suggerimenti

• Sperimentare con scala attiva in ScalaDecoratore per la scala ideale.
• Regolate il padding e il margine degli elementi per creare un layout adatto al vostro progetto.
• Utilizzo conPrimavera() in Reanimated per una transizione graduale senza problemi.

Conclusione

Aggiunta di un trascinabile Elenco piatto con un decoratore di scala in Reagire nativo migliora l'interazione dell'utente fornendo un feedback visivo e creando un'esperienza di trascinamento senza soluzione di continuità. Che si tratti di un elenco di cose da fare, di un task manager o anche di un'interfaccia utente di riordino, il decoratore di scala fa sì che l'applicazione risulti curata e reattiva.

Combinando react-native-draggable-flatlist, ScaleDecorator, e le animazioni opzionali di Reanimated, è possibile creare un elenco dinamico e interattivo che si distingue. Ora siete pronti a implementare un elenco coinvolgente e trascinabile che piacerà agli utenti!