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

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

结果：