React NativeでDragable FlatListにScale Decoratorを実装する

視覚的にインタラクティブでユーザーフレンドリーなエクスペリエンスを創造することは、次のような点で重要である。 モバイルアプリ開発.React NativeのFlatListは汎用性が高く効率的で、大規模なリストのレンダリングによく使用されます。ドラッグ＆ドロップ機能を追加すれば、FlatListをさらに魅力的なものにできます。この記事では、React Nativeでドラッグ可能なFlatListを実装する方法について説明します。

前提条件

始める前に、React Nativeの基本的な知識と、以下のアニメーションにある程度慣れていることを確認してください。 リアクトネイティブ.以下のライブラリもインストールする必要がある：

1. リアクト・ネイティブ・アニメイテッド - アニメーション用。
2. リアクト・ネイティブ・ジェスチャー・ハンドラー - タッチジェスチャーを処理する。
3. リアクトネイティブ・ドラッガブル・フラットリスト - ドラッグ可能なリスト機能。

react-native-reanimated react-native-gesture-handler react-native-draggable-flatlist をインストールする。

ステップ1: Draggable FlatListのセットアップ

まず、必要なコンポーネントをインポートし、シンプルなドラッグ・テーブルを設定します。 フラットリスト.

インポート 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: `項目${i + 1}`、
}));

const DraggableList = () => { { [items, setItems].
    const [items, setItems] = React.useState(data)；
    
        return (
            <ScaleDecoratorアクティブスケール={1.1｝
                
                    。
                        {item.label}
                    </Text
                </View
            </ScaleDecorator
        );
    };
    return (
         setItems(data)}.
            keyExtractor={(item) => item.key}.
            renderItem={renderItem} です。
        />
    );
};
export default DraggableList；

これが現状だ：

1. データ配列:リストにレンダリングするアイテムの配列を設定する。
2. DraggableFlatList コンポーネント:項目をドラッグできるリストを表示します。
3. レンダーアイテム:各項目はテキストを表示し、使用する ドラッグ をレンダー・プロップから削除し、長押しでドラッグできるようにした。
4. スケールデコレーター:各リスト項目をラップし、アクティブ時にはスケーリング効果を提供する。

ステップ2：スケールデコレーターの適用

の スケールデコレーター から リアクトネイティブ・ドラッガブル・フラットリスト は、アイテムの選択に関する視覚的なフィードバックを提供する強力なツールです。セッティング アクティブスケール アイテムがドラッグされるときのスケールサイズを制御します。

です。

この例では activeScale={1.1} は、アイテムがアクティブなとき、元のサイズの110%にスケールします。UIの必要に応じて、スケールファクターを調整してください。

ステップ3：カスタムスタイルの追加

カスタムスタイルを追加して、外観とインタラクションを強化しましょう。

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

これらのスタイルは、パディング、マージン、基本色を定義し、各項目にカードのような外観を与えます。

ステップ4：アニメーション リアクト・ネイティブ・アニメイテッド (オプション）

拡大縮小をもっとコントロールしたい場合や、ドラッグ中に他のプロパティをアニメーションさせたい場合は、以下を統合することを検討する。 リアクト・ネイティブ・アニメイテッド.を使ってスムーズなスケールインとスケールアウトを実現する方法を簡単に紹介しよう。 生き返った.

1. Reanimatedをインストールし、インポートする。
2. で包む。 アニメーションここで、スケール値はドラッグの状態によって変化する。

インポート 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}
      </テキスト
    </Animated.View
  );
};

テストとトラブルシューティング

デバイスまたはエミュレータ上でアプリを実行し、アイテムを長押しして移動させ、ドラッグ・アンド・ドロップ機能をテストする。

ヒント

• 実験 アクティブスケール で スケールデコレーター 理想的なスケールのために。
• アイテムのパディングとマージンを調整して、デザインに合ったレイアウトを作りましょう。
• 用途 withSpring() の『リアニメイテッド』では、スムーズなスケール・イン・アウトの移行を実現している。

結論

ドラッガブルの追加 フラットリスト のスケールデコレータを使用する。 リアクトネイティブ は、視覚的なフィードバックを与え、シームレスなドラッグ＆ドロップ体験を生み出すことで、ユーザーとのインタラクションを強化します。ToDoリスト、タスクマネージャー、あるいは並べ替えUIであっても、スケールデコレーターはアプリを洗練されたレスポンスの良いものにします。

組み合わせることで react-native-draggable-flatlist、ScaleDecorator、 とオプションのReanimatedアニメーションで、目立つダイナミックでインタラクティブなリストを作成できます。これで、ユーザーが気に入るような、魅力的でドラッグしやすいリストを実装する準備が整いました！