Implementering av en skaldekorator i en draggbar flatlista i React Native

Att skapa en visuellt interaktiv och användarvänlig upplevelse är nyckeln till att utveckling av mobilappar. React Natives FlatList är mycket mångsidig och effektiv, och används ofta för att rendera stora listor. Med den extra fördelen med dra-och-släpp-funktionalitet kan du göra din FlatList ännu mer engagerande. I den här artikeln kommer vi att utforska hur man implementerar en dragbar FlatList i React Native, komplett med en skaldekorator för att få objekt att dyka upp och reagera på beröring.

Förkunskapskrav

Innan du börjar bör du se till att du har grundläggande kunskaper om React Native och viss kännedom om animationer i Reager Native. Du måste också installera följande bibliotek:

1. react-native-reanimated - för animationer.
2. react-native-gesture-hanterare - för hantering av pekgester.
3. react-native-draggable-flatlist - för funktionalitet med dragbara listor.

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

Steg 1: Konfigurera Draggable FlatList

Börja med att importera de nödvändiga komponenterna och skapa en enkel draggable PlattLista.

importera React från 'react';
import { StyleSheet, View, Text } från 'react-native';
import DraggableFlatList, { ScaleDecorator } från 'react-native-draggable-flatlist';

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

const DraggableList = () => {
    const [items, setItems] = React.useState(data);
    const renderItem = ({ objekt, dra, isActive }) => {
        return (
            
                
                    
                        {artikel.etikett}
                    
                
            
        );
    };
    return (
         setItems(data)}
            keyExtractor={(objekt) => objekt.nyckel}
            renderItem={renderItem}
        />
    );
};
export default DraggableList;

Det här är vad som händer:

1. Data Array: Vi skapar en array med objekt som ska återges i listan.
2. DraggableFlatList Komponent: Här visas en lista där objekt kan dras.
3. Rendera objekt: Varje objekt visar text och använder dra från renderingsstödet för att möjliggöra draggning med lång tryckning.
4. ScaleDecorator: Omsluter varje listobjekt och ger en skalningseffekt när den är aktiv.

Steg 2: Använd skaldekoratorn

De ScaleDecorator från react-native-draggable-flatlist är ett kraftfullt verktyg för att ge visuell feedback om val av objekt. Inställning aktivSkala styr skalstorleken när ett objekt dras.

<ScaleDecorator activeScale={1.1}>

I detta exempel ställer du in aktivSkala={1,1} skalar objektet till 110% av dess ursprungliga storlek när det är aktivt. Justera skalfaktorn efter behov för ditt användargränssnitt.

Steg 3: Lägg till anpassade stilar

Förbättra utseendet och interaktionen genom att lägga till några anpassade stilar.

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

Dessa stilar definierar utfyllnad, marginal och grundfärger, vilket ger varje objekt ett kortliknande utseende.

Steg 4: Animationer med react-native-reanimated (Valfritt)

Om du vill ha mer kontroll över skalning eller vill animera andra egenskaper under dragning, kan du överväga att integrera react-native-reanimated. Här är ett snabbt exempel på hur du kan uppnå en jämn in- och utskalningseffekt med Återupplivad.

1. Installera Reanimated och importera det.
2. Packa in varje objekt i en Animerad.vy, där skalvärdet ändras beroende på dragningstillståndet.

import Animated, { useAnimatedStyle, withSpring } från 'react-native-reanimated';

const renderItem = ({ objekt, dra, isActive }) => {
  const scale = isActive ? withSpring(1.1) : withSpring(1);
  const animatedStyle = useAnimatedStyle(() => ({
    transformera: [{skala }],
  }));

  return (
    
      
        {artikel.etikett}
      
    
  );
};

Testning och felsökning

Kör appen på en enhet eller emulator och testa dra-och-släpp-funktionen genom att trycka och hålla in ett objekt och sedan flytta runt det.

Tips

• Experimentera med aktivSkala i ScaleDecorator för den ideala skalan.
• Justera objektets utfyllnad och marginal för att skapa en layout som passar din design.
• Användning medSpring() i Reanimated för en smidig övergång från skala-in till skala-ut.

Slutsats

Lägga till en draggable PlattLista med en skaldekorator i Reager Native förbättrar användarinteraktionen genom att ge visuell feedback och skapa en sömlös dra-och-släpp-upplevelse. Oavsett om det gäller en att-göra-lista, uppgiftshanterare eller till och med ett användargränssnitt för omorganisering gör skaldekoratorn att appen känns polerad och responsiv.

Genom att kombinera react-native-draggable-flatlist, ScaleDecorator, och valfria Reanimated-animationer kan du skapa en dynamisk och interaktiv lista som sticker ut. Nu är du redo att implementera en engagerande, dragvänlig lista som användarna kommer att älska!