react-native-gesture-handler PanGestureHandler没有更新

Question

不确定是问题还是我遗漏了一些东西。

我有两个组成部分：App.js and Pan.js

所以我想做的是：当我单击“设置网格按钮”以设置一些数据点在App.js中的状态并将其提供给Pan.js以为它的道具时。但是Pan.js没有更新。

import * as React from 'react';
import { View, StyleSheet, TouchableOpacity, Text, } from 'react-native';
import Pan from './components/Pan';


export default class App extends React.Component {

  // Uncomment this to see that the grid is working
  // componentWillMount(){

  //   const gridPoints = [];
  //   for(var a=0; a<=400;a+=100){
  //     gridPoints.push({a, o:'x'});
  //     gridPoints.push({a, o:'y'});
  //   }
  //   this.setState({gridPoints});
  // }

  state = {
    gridPoints: [],
  }

  createGridPoints(step, count) {
    const gridPoints = [];
    for(var a=0; a<=count;a+=step){
      gridPoints.push({a, o:'x'});
      gridPoints.push({a, o:'y'});
    }
    this.setState({gridPoints});
  }

  render() {
    console.log(this.state.gridPoints);
    return (
      <View style={styles.container}>
        <Pan gridPoints={this.state.gridPoints} />
        <TouchableOpacity style={{bottom:100}} onPress={()=>this.createGridPoints(100, 400)}><Text>Add grid</Text></TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

import React, { Component } from 'react';
import { StyleSheet, View} from 'react-native';
import {
  PanGestureHandler,
  State,
} from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';

const { set, cond, block, eq, add, Value, event, concat, multiply, greaterOrEq, lessOrEq, divide, and, sub, debug } = Animated;

function between(number, greater, lower) {
  return and(greaterOrEq(number, greater), lessOrEq(number, lower));
}

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.X = new Value(0);
    this.Y = new Value(0);
    this.offsetX = new Value(0);
    this.offsetY = new Value(0);

    const { gridPoints } = this.props;
    this.gridRules = [];

    if (gridPoints.length) {
      gridPoints.map(pt => {
        this.addPoint(pt.a, pt.o, 90);
      });
    }

    this.handlePan = event([
      {
        nativeEvent: ({ translationX: x, translationY: y, state }) =>
          block([
            set(this.X, add(x, this.offsetX)),
            set(this.Y, add(y, this.offsetY)),
            this.gridRules,
            cond(eq(state, State.END), [
              set(this.offsetX, add(this.offsetX, x)),
              set(this.offsetY, add(this.offsetY, y)),
            ]),
          ]),
      },
    ]);
  }

  componentWillReceiveProps(nextProps){
    const { gridPoints } = nextProps;
    this.gridRules = [];

    if (gridPoints.length) {
      gridPoints.map(pt => {
        this.addPoint(pt.a, pt.o, 90);
      });
    }
  }

  addPoint(x, o = 'x', d = 5) {
    const {width, height} = this.props;
    const scale = this.Z;
    const direction = o === 'x' ? this.X : this.Y;
    const side = o === 'x' ? width : height;
    const offset = divide(multiply(side, scale), 2);

    const rule = [
      cond(
        between(add(direction, offset), x - d, x + d),
        [
          set(direction, multiply(sub(offset, x), -1)),
        ],
        cond(
          between(direction, x - d, x + d),
          [set(direction, x)],
          cond(
            between(sub(direction, offset), x - d, x + d),
            [set(direction, add(offset, x))],
          ),
        ),
      ),
    ];

    this.gridRules.push(rule);
  }

  rotationRef = React.createRef();
  panRef = React.createRef();
  pinchRef = React.createRef();

  render() {

    return (
      <View style={styles.container}>
        <PanGestureHandler
          ref={this.panRef}
          minDist={10}
          onGestureEvent={this.handlePan}
          onHandlerStateChange={this.handlePan}>
            <Animated.View
              resizeMode="contain"
              style={[
                styles.box,
                {
                  transform: [
                    { translateX: this.X },
                    { translateY: this.Y },
                  ],
                },
              ]}
            />
        </PanGestureHandler>
      </View>
    );
  }
}

const IMAGE_SIZE = 200;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  box: {
    backgroundColor: "red",
    width: IMAGE_SIZE,
    height: IMAGE_SIZE,
  },
});