react-native - React Native でのパン ジェスチャによる要素のスタイルの変更

Question

四角で分割された画面があり、パンジェスチャで指で連続してタッチして色を変更する必要があります。

最初は、パンハンドラーで指の位置を取得し、その場所にある要素を見つけて、色を変更できると思っていました。でも思ったようにはいきませんでした。私はこの問題で立ち往生しており、あなたの意見について疑問に思っています.

Answer 1

これらの正方形の親 View に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

結果：