反应原生：this.touchableHandleResponderGrant 不是一个函数

Question

我正在尝试使用React Native PanResponder 实现一个简单的拖动功能。我查看了this tutorial，但我正在做一个更简单的事情，它只会在拖动时更改状态变量。

componentWillMount() {
    this._panResponder = PanResponder.create({
        onMoveShouldSetResponderCapture: () => true,
        onMoveShouldSetPanResponderCapture: () => true,
        onPanResponderGrant: (e, gestureState) => {
            //this.setState({pan: 0});
            console.log('grant');
        },

        onPanResponderMove: (e, gestureState) => {
        //this.setState({pan: gestureState.dx});
        console.log(gestureState);
        },
        onPanResponderRelease: (e, {vx, vy}) => {
        }

    });
    console.log('pan init');
}

在我的渲染函数中我有这个：

<Text {...this._panResponder.panHandlers}>Drag here</Text>

但是，一旦我平移/拖动，我就会得到一个带有错误的红框：

this.touchableHandleResponderGrant is not a function

我做错了什么？

Answer 1

我猜panHandlers prop 只能与View 或Animated.View 组件一起使用。

<View {...this._panResponder.panHandlers}>
  <Text>Drag here</Text>
</View>

或

<Animated.View {...this._panResponder.panHandlers}>
  <Text>Drag here</Text>
</Animated.View>