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

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

结果：