docs: 添加react-native-draggable-flatlist的example (#5)

Signed-off-by: 李琦 <liqi219@h-partners.com>

Author: li2qi

Example/App.tsx

@@ -0,0 +1,98 @@
+// import './shims'
+
+import React from 'react';
+import "react-native-gesture-handler";
+import { Platform, UIManager } from 'react-native'
+import { NavigationContainer } from '@react-navigation/native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { createStackNavigator } from '@react-navigation/stack';
+import Swipeable from "./screens/Swipeable";
+import Basic from "./screens/Basic";
+import Nested from "./screens/Nested";
+import Horizontal from "./screens/Horizontal";
+
+
+if (Platform.OS === 'android') {
+    UIManager.setLayoutAnimationEnabledExperimental &&
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+
+import { View, Text, Button } from 'react-native';
+
+const Stack = createStackNavigator();
+
+class Home extends React.Component {
+    onPress1 = () => {
+        this.props.navigation.navigate('Basic');
+    }
+    onPress2 = () => {
+        this.props.navigation.navigate('Swipeable');
+    }
+    onPress3 = () => {
+        this.props.navigation.navigate('Nested');
+    }
+    onPress4 = () => {
+        this.props.navigation.navigate('Horizontal');
+    }
+
+    render() {
+        return (
+            <View style={{padding:14}}>
+                <View style={{height:50}}>
+                    <Button title="Basic"  onPress={this.onPress1}></Button>
+                </View>
+                <View style={{height:50,marginTop:12}}>
+                    <Button title="Swipeable"  onPress={this.onPress2}></Button>
+                </View>
+                <View style={{height:50,marginTop:12}}>
+                    <Button title="Nested"  onPress={this.onPress3}></Button>
+                </View>
+                <View style={{height:50,marginTop:12}}>
+                    <Button title="Horizontal"  onPress={this.onPress4}></Button>
+                </View>
+                
+            </View>
+        );
+    }
+};
+
+class App extends React.Component {
+    render() {
+        return (
+            <GestureHandlerRootView style={{ flex: 1, backgroundColor: 'seashell' }}>
+                <SafeAreaProvider>
+                    <NavigationContainer>
+                        <Stack.Navigator initialRouteName="draggleList">
+                            <Stack.Screen name="draggleList" component={Home} />
+                            <Stack.Screen name="Basic" component={Basic} />
+                            <Stack.Screen name="Swipeable" component={Swipeable} />
+                            <Stack.Screen name="Nested" component={Nested} />
+                            <Stack.Screen name="Horizontal" component={Horizontal} />
+                        </Stack.Navigator>
+                    </NavigationContainer>
+                </SafeAreaProvider>
+            </GestureHandlerRootView>
+        );
+    }
+}
+
+
+// export default App;
+
+export default {
+    displayName: 'react-native-draggable-flatlist',
+    framework: 'React',
+    category: 'UI',
+    title: 'react-native-draggable-flatlist',
+    documentationURL: 'react-native-draggable-flatlist',
+    description: '',
+    examples: [
+        {
+            title: 'react-native-draggable-flatlist',
+            render: function (): any {
+                return <App />;
+            },
+        },
+    ],
+};

Example/screens/Basic.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useRef } from "react";
+import { Text, StyleSheet, View } from "react-native";
+import DraggableFlatList, {
+    ScaleDecorator,
+    RenderItemParams,
+} from "react-native-draggable-flatlist";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { runOnJS } from "react-native-reanimated";
+import { mapIndexToData, Item } from "../utils";
+
+const NUM_ITEMS = 10;
+const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData);
+
+export default function Basic() {
+    const [data, setData] = useState(initialData);
+    const draggableListRef = useRef(null);
+
+    const renderItem = ({ item, drag, isActive, getPanGestureRef }: RenderItemParams<Item> & { getPanGestureRef?: () => any }) => {
+        const panRef = getPanGestureRef?.();
+        const longPress = Gesture.LongPress()
+            .simultaneousWithExternalGesture(panRef || [])
+            .onStart(() => {
+                console.log("LongPress.onStart", {
+                    key: item.key,
+                });
+                runOnJS(drag)();
+            })
+            .onEnd((_e, success) => {
+                console.log("LongPress.onEnd", { success });
+            });
+
+        return (
+            <ScaleDecorator>
+                <GestureDetector gesture={longPress}>
+                    <View
+                        style={[
+                            styles.rowItem,
+                            { backgroundColor: isActive ? "red" : item.backgroundColor },
+                        ]}
+                    >
+                        <Text style={styles.text}>{item.text}</Text>
+                    </View>
+                </GestureDetector>
+            </ScaleDecorator>
+        );
+    };
+    const renderPlaceholderFunction = ({ item, index }: { item: Item; index: number }) => {
+        return (
+        <View style={[
+            { backgroundColor: `${item.backgroundColor}30` } // 30% 透明度
+        ]}>
+            <Text>拖动 "{item.text}"</Text>
+        </View>
+        );
+    };
+    return (
+        <DraggableFlatList
+            data = {data}
+            ref = {draggableListRef}
+            onDragBegin = {(index) => {
+                console.log("onDragBegin", { index });
+            }}
+            onPlaceholderIndexChange ={(index) => {
+                console.log("onPlaceholderIndexChange", { index });
+            }}
+            onDragEnd = {({ data, from, to }) => {
+                console.log("onDragEnd", { from, to });
+                setData(data);
+            }}
+            keyExtractor = {(item) => item.key}
+            renderItem = {renderItem}
+            onScrollOffsetChange = {(offset) => {
+                console.log('onScrollOffsetChange:', offset);
+            }}
+            onRelease = {(index) => {
+                console.log('onRelease:', index);
+            }}
+            containerStyle = {styles.listContainer}
+            activationDistance = {20}
+            animationConfig = {{
+                damping: 10, 
+                mass: 0.5,
+                stiffness: 300, 
+                overshootClamping: false,
+            }}
+            debug = {false}
+            dragHitSlop = {{ top: -10, left: -10, bottom: -10, right: -10 }}
+            renderPlaceholder = {renderPlaceholderFunction}
+            autoscrollThreshold = {200}
+            autoscrollSpeed = {200}
+        />
+        
+    );
+}
+
+const styles = StyleSheet.create({
+    listContainer: {
+        flex: 1,
+        backgroundColor: "#bcaaaaff",
+    },
+    rowItem: {
+        height: 100,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    text: {
+        color: "white",
+        fontSize: 24,
+        fontWeight: "bold",
+        textAlign: "center",
+    },
+});

Example/screens/Home.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+
+function Home() {
+    return (
+        <View style={{ flex: 1, backgroundColor: 'seashell' }}>
+            <Link to="Basic" />
+            <Link to="Swipeable" />
+            <Link to="Nested" />
+            <Link to="Horizontal" />
+        </View>
+    );
+}
+
+export default Home;
+
+function Link({ to }: { to: string }) {
+    const navigation = useNavigation();
+
+    return (
+        <TouchableOpacity
+            onPress={() => navigation.navigate(to)}
+            style={{
+                padding: 14,
+            }}>
+            <Text style={{ color: '#555', fontSize: 24, fontWeight: 'bold' }}>
+                {to}
+            </Text>
+        </TouchableOpacity>
+    );
+}

Example/screens/Horizontal.tsx

@@ -0,0 +1,82 @@
+import React, { useCallback, useState } from "react";
+import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { runOnJS } from "react-native-reanimated";
+import DraggableFlatList, {
+    ScaleDecorator,
+    RenderItemParams,
+} from "react-native-draggable-flatlist";
+import { mapIndexToData, Item } from "../utils"
+
+const NUM_ITEMS = 10;
+
+const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData);
+
+
+
+export default function Horizontal() {
+    const [data, setData] = useState(initialData);
+
+    const renderItem = useCallback((params: RenderItemParams<Item>) => {
+        const { item, drag, isActive } = params;
+        const getPanGestureRef = (params as any).getPanGestureRef as (() => any) | undefined;
+        const longPress = Gesture.LongPress()
+            .minDuration(200)
+            .onStart(() => runOnJS(drag)());
+        if (getPanGestureRef) {
+            const panRef = getPanGestureRef();
+            if (panRef) longPress.simultaneousWithExternalGesture(panRef);
+        }
+        return (
+            <ScaleDecorator>
+                <GestureDetector gesture={longPress}>
+                    <TouchableOpacity
+                        activeOpacity={1}
+                        disabled={isActive}
+                        style={[
+                            styles.rowItem,
+                            {
+                                opacity: isActive ? 0.5 : 1,
+                                padding: 5,
+                                backgroundColor: item.backgroundColor,
+                            },
+                        ]}
+                    >
+                        <Text style={styles.text}>{item.text}</Text>
+                    </TouchableOpacity>
+                </GestureDetector>
+            </ScaleDecorator>
+        );
+    }, []);
+
+    return (
+        <View style={{ flex: 1 }}>
+            <DraggableFlatList
+                horizontal
+               
+                data={data}
+                onDragEnd={({ data }) => setData(data)}
+                keyExtractor={(item) => {
+                    return item.key
+                }}
+                renderItem={renderItem}
+                renderPlaceholder={() => <View style={{ flex: 1, backgroundColor: 'tomato' }} />}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    rowItem: {
+        height: 100,
+        width: 100,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    text: {
+        color: "white",
+        fontSize: 24,
+        fontWeight: "bold",
+        textAlign: "center",
+    },
+});