@tarojsx/library/docs/react-use-gesture.mdx

Taro3 library

---
id: react-use-gesture
title: react-use-gesture
sidebar_label: react-use-gesture
---

## [react-use-gesture](https://github.com/react-spring/react-use-gesture)

### 需求

-   `requestAnimationFrame`

### 使用

```jsx
import React from 'react'
import { View } from '@tarojs/components'
import { useDrag } from 'react-use-gesture'
import { useGestureConfig } from '@tarojsx/library/dist/react-use-gesture'

const Demo = () => {
    const [gestureConfig, containerProps] = useGestureConfig()

    const bind = useDrag(({ down, movement: [mx, my], direction: [xDir, yDir], distance, cancel }) => {
        console.log('按下', down)
        console.log('轴移动距离', mx, my)
        console.log('轴移动方向', xDir, yDir)
        console.log('直线移动距离', distance)
        console.log('取消拖动操作', cancel)
    }, gestureConfig)

    return <View {...containerProps}>{<View {...bind()} />}</View>
}
```

import { useRef, useMemo } from 'react'
import Taro from '@tarojs/taro'
import _clamp from 'lodash/clamp'
import { useGestureConfig, useDrag } from '@tarojsx/library/dist/react-use-gesture'
import { animated, useSprings } from '@tarojsx/library/dist/react-spring'
import { View } from '@tarojs/components'
import { UI } from '@/ui'

<UI phone title="Gesture">
    {() => {
        const { windowWidth } = useMemo(() => Taro.getSystemInfoSync(), [])
        const pages = useMemo(
            () => [
                'https://img11.360buyimg.com/uba/jfs/t21205/91/853520716/145629/b03d7fa7/5b19f383N6a30536b.jpg',
                'https://img14.360buyimg.com/ling/jfs/t1/103557/3/12087/1051626/5e44b357E4cab8765/d8c821c4a3e1060d.png',
                'https://storage.360buyimg.com/taro-club-img/b42116392c909d0680788853011c70db',
                'https://storage.jd.com/taro-resource/review.jpg',
                'https://misc.aotu.io/jimczj/2018-08-27taro-ui.jpg',
                'https://img10.360buyimg.com/img/jfs/t1/21860/12/8740/42390/5c790470E1d0bbce9/9f9bb78d01f7564b.png',
            ],
            []
        )
        const [gestureConfig, containerProps] = useGestureConfig()
        const index = useRef(0)
        const [springs, set] = useSprings(pages.length, (i) => ({ x: i * 2 * windowWidth, sc: 1, display: 'block' }))
        const drag = useDrag((e) => {
            const {
                down,
                direction: [xDir],
                distance,
                cancel,
            } = e
            console.log('useDrag', 'distance', distance)
            if (down && distance > windowWidth / 2) {
                index.current = _clamp(index.current + (xDir > 0 ? -1 : 1), 0, pages.length - 1)
                cancel()
            }
            set((i) => {
                if (i < index.current - 1 || i > index.current + 1) return { display: 'none' }
                const x = (i - index.current) * 2 * windowWidth + (down ? xDir * distance : 0)
                const sc = down ? 1 - distance / windowWidth / 2 : 1
                return { x, sc, display: 'block' }
            })
        }, gestureConfig)
        return (
            <View {...containerProps}>
                <View style={{ textAlign: 'center', fontSize: '40px' }}>⬅ 拖拽图片 ➡</View>
                {springs.map(({ x, display, sc }, i) => (
                    <animated.View
                        {...drag()}
                        key={i}
                        style={{
                            position: 'absolute',
                            display,
                            width: '750px',
                            height: '750px',
                            transform: x.interpolate((x) => `translate3d(${x}px,0,0)`),
                        }}
                    >
                        <animated.View
                            style={{
                                height: '100%',
                                transform: sc.interpolate((s) => `scale(${s})`),
                                background: `center / contain no-repeat url(${pages[i]})`,
                            }}
                        />
                    </animated.View>
                ))}
            </View>
        )
    }}
</UI>

| 参数 | 说明        | 类型   | 默认值 |
| ---- | ----------- | ------ | ------ |
| id?  | 容器元素 ID | string | uuid   |
| ref? | React ref   |        |        |

| 返回值 | 说明                                                 | 类型 |
| ------ | ---------------------------------------------------- | ---- |
| [0]    | gestureConfig: 传给 `react-use-gesture` hooks 的配置 | {}   |
| [1]    | containerProps: 需要绑定在容器元素上的属性           |      |