在 React Native 中通过 Pan 手势改变元素的样式

Question

我有一个由正方形分隔的屏幕，需要用手指连续触摸来改变它们的颜色。

起初，我认为我可以通过平移处理程序获取我手指的位置并找到哪个元素位于该位置来做到这一点，这样我就可以改变它的颜色。但它没有像我想的那样工作。我被这个问题困住了，想知道你的意见。

Answer 1

为这些方块的父视图提供 PanResponder。

// define the constants
const rows = 10;
const columns = 5;
const {width, height} = Dimensions.get('window');

在onPanResponderMove里面写这个逻辑。

 onPanResponderMove: (evt, gestureState) => {
    let i = 0;
    let x = evt.nativeEvent.pageX;
    let y = evt.nativeEvent.pageY;
    let percentageX = Math.floor(x / (width / columns));
    let percentageY = Math.floor(y / (height / rows));
    i = percentageX + columns * percentageY;
    this.onChangeItem(i);  // <-- i will provide you the index of current touch 
  },

在 onChangeItem 函数中检查移动手指时索引是否发生变化。

onChangeItem = (index) => {
  if (this.index !== index) {
    // do operations here with index.
  }
};

....

这是我的示例代码：PanhandlerAnimations

在 React Native 中通过 Pan 手势改变元素的样式

Changing Styles of Elements by Pan Gesture in React Native

react-native

gesture

react-animations

结果：