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

【问题标题】：Changing Styles of Elements by Pan Gesture in React Native在 React Native 中通过 Pan Gesture 改变元素的样式
【发布时间】：2020-05-20 09:55:04
【问题描述】：

我有一个由正方形划分的屏幕，需要通过平移手势连续用手指触摸来更改它们的颜色。

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

【问题讨论】：

您好 Murat，您可以尝试解释一下您尝试过的方法以及失败的原因。您还可以分享您的代码的最小部分，以便让我们了解您在做什么，并可能指出您出了什么问题。

标签： react-native gesture react-animations

【解决方案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

结果：

【讨论】：

我想你刚刚拯救了我的一天。非常感谢！