android - React Native - 动画值的 getTranslateTransform() 在 Android 虚拟设备上出错

Question

我正在使用 react-native 实现可拖动组件。这个组件在我的 IOS 设备上运行良好。但是，当我在虚拟 android 设备上测试此组件时，会出现如下错误：

更新由 RCTView 管理的视图的属性“转换”时出错

无效的

translateX 的值不能从 String 转换为 Double

下面是我的代码

export default class DraggableTouchableOpacity extends Component {
  constructor (props) {
    super(props);
  }

  componentWillMount() {
    this.pan = new Animated.ValueXY();
    this.panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: () => true,
      onPanResponderGrant: (e, gestureState) => {
        this.pan.setOffset({x: this.pan.x, y: this.pan.y});
      },
      onPanResponderMove: (e, gestureState) => {
        this.pan.setValue({x: gestureState.dx, y: gestureState.dy});
      },
      onPanResponderRelease: (e) => {
        Animated.spring(this.pan, {
          toValue: {x: 0, y: 0},
          friction: 5
        }).start();
      }
    });
  }

  render() {
    return (
        <Animated.View
          style = {{
            transform: this.pan.getTranslateTransform()
          }}
          {...this.panResponder.panHandlers}
        >
          <TouchableOpacity {...this.props} ref = {view => { this.myComponent = view; }}/>
        </Animated.View>
    );
  }
}

标签： androidreact-nativeanimationdrag-and-drop

Answer 1

onPanResponderGrand 内的 setOffset 导致错误

更改该功能

onPanResponderGrant: (e, gestureState) => {
    this.pan.setOffset({x: this.pan.x, y: this.pan.y});
},

至

onPanResponderGrant: (e, gestureState) => {
   this.pan.setValue({x: 0, y: 0});
},