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

结果：