如何使用react-native实现Word-Link游戏中的滑动手势

npm install -g react-native-cli

react-native init WordLinkGame

cd WordLinkGame

npm install

import React, { useState } from 'react';
import { View, Text, PanResponder } from 'react-native';

const WordLinkGame = () => {
  const [gesture, setGesture] = useState('');

  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (event, gestureState) => {
      const { dx, dy } = gestureState;
      if (Math.abs(dx) > Math.abs(dy)) {
        if (dx > 0) {
          setGesture('向右滑动');
        } else {
          setGesture('向左滑动');
        }
      } else {
        if (dy > 0) {
          setGesture('向下滑动');
        } else {
          setGesture('向上滑动');
        }
      }
    },
  });

  return (
    <View {...panResponder.panHandlers}>
      <Text>滑动手势：{gesture}</Text>
    </View>
  );
};

export default WordLinkGame;

import React from 'react';
import { View } from 'react-native';
import WordLinkGame from './WordLinkGame';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <WordLinkGame />
    </View>
  );
};

export default App;

react-native run-android   // 运行在Android设备上
react-native run-ios       // 运行在iOS设备上