Een schaaldecorator implementeren in een Draggable FlatList in React Native

Het creëren van een visueel interactieve en gebruiksvriendelijke ervaring is de sleutel tot mobiele app-ontwikkeling. FlatList van React Native is zeer veelzijdig en efficiënt en wordt vaak gebruikt voor het renderen van grote lijsten. Met het extra voordeel van versleepfunctionaliteit kun je je FlatList nog aantrekkelijker maken. In dit artikel onderzoeken we hoe je een versleepbare FlatList kunt implementeren in React Native, compleet met een schaaldecorator om items te laten verschijnen en te laten reageren op aanraking.

Vereisten

Voordat je begint, moet je ervoor zorgen dat je basiskennis hebt van React Native en enige bekendheid met animaties in React-native. Je moet ook de volgende bibliotheken installeren:

1. react-natief-gereanimeerd - voor animaties.
2. react-native-gesture-handler - voor het afhandelen van aanraakbewegingen.
3. react-native-draggable-flatlist - voor versleepbare lijstfunctionaliteit.

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

Stap 1: Draggable FlatList instellen

Begin met het importeren van de benodigde componenten en het opzetten van een eenvoudige draggable FlatList.

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

const data = Array.from({lengte: 10 }, (v, i) => ({
    sleutel: `item-${i}`,
    label: `item ${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}
        />
    );
};
exportstandaard DraggableList;

Dit is wat er gebeurt:

1. Gegevensarray: We stellen een array van items in om weer te geven in de lijst.
2. DraggableFlatList Component: Hiermee wordt een lijst weergegeven waarin items kunnen worden versleept.
3. Item weergeven: Elk item geeft tekst weer en gebruikt slepen van de renderpropositie om slepen bij lang indrukken mogelijk te maken.
4. SchaalDecorator: Omhult elk lijstitem en geeft een schalingseffect wanneer actief.

Stap 2: De schaalversierder toepassen

De SchaalDecorator van react-native-draggable-flatlist is een krachtig hulpmiddel om visuele feedback te geven over de selectie van items. instellen activeScale bepaalt de schaalgrootte wanneer een item wordt gesleept.

<ScaleDecorator activeScale={1.1}>

In dit voorbeeld wordt activeScale={1.1} schaalt het item naar 110% van de oorspronkelijke grootte als het actief is. Pas de schaalfactor aan zoals nodig voor uw UI.

Stap 3: Aangepaste stijlen toevoegen

Verbeter het uiterlijk en de interactie door enkele aangepaste stijlen toe te voegen.

const stijlen = StyleSheet.create({
  itemContainer: {
    opvulling: 20,
    marginVertical: 8,
    marginHorizontal: 16,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#ddd',
  },
  tekst: {
    lettergrootte: 18,
    fontWeight: 'bold',
  },
});

Deze stijlen definiëren opvulling, marge en basiskleuren, waardoor elk item er als een kaart uitziet.

Stap 4: Animaties met react-natief-gereanimeerd (Optioneel)

Als je meer controle wilt over het schalen of als je andere eigenschappen wilt animeren tijdens het slepen, overweeg dan de integratie van react-natief-gereanimeerd. Hier is een snel voorbeeld van hoe je een vloeiend schaal-in en schaal-uit effect kunt bereiken met Gereanimeerd.

1. Installeer Reanimated en importeer het.
2. Verpak elk item in een Geanimeerd.bekijkenwaarbij de schaalwaarde verandert op basis van de sleeptoestand.

import Animated, { useAnimatedStyle, withSpring } uit 'react-native-reanimated';

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

  return (
    
      
        {item.label}
      
    
  );
};

Testen en problemen oplossen

Start de app op een apparaat of emulator en test de sleepfunctionaliteit door een item ingedrukt te houden en het vervolgens te verplaatsen.

Tips

• Experimenteer met activeScale in SchaalDecorator voor de ideale schaal.
• Pas de opvulling en marge van items aan om een lay-out te maken die bij je ontwerp past.
• Gebruik metVooruitgang() in Reanimated voor een soepele overgang van schaal naar schaal.

Conclusie

Een draggable toevoegen FlatList met een schaaldecorator in React-native verbetert de gebruikersinteractie door visuele feedback te geven en een naadloze drag-and-drop ervaring te creëren. Of het nu gaat om een takenlijst, taakbeheer of zelfs een UI voor het ordenen van taken, de schaaldecorator zorgt ervoor dat de app gepolijst en responsief aanvoelt.

Door react-native-draggable-flatlist, ScaleDecorator, en optionele Reanimated-animaties kun je een dynamische en interactieve lijst maken die opvalt. Nu ben je klaar om een aantrekkelijke, sleepvriendelijke lijst te implementeren waar gebruikers dol op zullen zijn!