fix(rn): 修复 MovableView 组件状态变更无效及滑动时跳变的问题 (#9901)

* fix: 修复组件 MovableView 属性状态更改无效的问题 * fix: 切换方向后滑动跳变的问题
NervJS · Jul 27, 2021 · edb78a5 · edb78a5
1 parent 7f41948
commit edb78a5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 22 deletions.
diff --git a/packages/taro-components-rn/src/components/MovableArea/index.tsx b/packages/taro-components-rn/src/components/MovableArea/index.tsx
@@ -7,24 +7,25 @@ class _MovableArea extends React.Component<MovableAreaProps, any> {
   constructor(props: MovableAreaProps) {
     super(props)
     this.state = {
-      child: null
+      width: this.props.width || 100,
+      height: this.props.height || 100,
     }
   }
 
   _onLayout = (event: LayoutChangeEvent): void => {
     const { width, height } = event.nativeEvent.layout
-    const child = React.cloneElement(this.props.children, { layout: { width, height } })
     this.setState({
       width,
       height,
-      child
     })
   }
 
   render(): JSX.Element {
-    const { style, width = 100, height = 100 } = this.props
-    const { child } = this.state
-    return <View style={[{ height, width, overflow: 'hidden' }, style]} onLayout={this._onLayout}>{child}</View>
+    const { style } = this.props
+    const { width, height } = this.state
+    return <View style={[{ height, width, overflow: 'hidden' }, style]} onLayout={this._onLayout}>
+      {React.cloneElement(this.props.children, { layout: { width, height } })}
+    </View>
   }
 }
 

diff --git a/packages/taro-components-rn/src/components/MovableView/index.tsx b/packages/taro-components-rn/src/components/MovableView/index.tsx
@@ -7,9 +7,9 @@ import { AnimatedValueProps, MovableViewProps } from './PropsType'
 class _MovableView extends React.Component<MovableViewProps, any> {
   static defaultProps = {
     direction: 'none',
-    onDragStart: (): void => {},
-    onDragEnd: (): void => {},
-    onChange: (): void => {},
+    onDragStart: (): void => { },
+    onDragEnd: (): void => { },
+    onChange: (): void => { },
     disabled: false,
     animation: true
   }
@@ -22,7 +22,6 @@ class _MovableView extends React.Component<MovableViewProps, any> {
     super(props)
     this.state = {
       pan: new Animated.ValueXY(),
-      disabled: props.disabled,
       xOffset: 0,
       yOffset: 0
     }
@@ -31,20 +30,25 @@ class _MovableView extends React.Component<MovableViewProps, any> {
 
   createPanResponder = (): void => {
     this.panResponder = PanResponder.create({
-      onMoveShouldSetPanResponder: () => !this.state.disabled,
-      onMoveShouldSetPanResponderCapture: () => !this.state.disabled,
+      onMoveShouldSetPanResponder: () => !this.props.disabled,
+      onMoveShouldSetPanResponderCapture: () => !this.props.disabled,
       onPanResponderGrant: () => {
         const { pan } = this.state
-        pan.setOffset({ x: pan.x._value, y: pan.y._value })
+        const { direction } = this.props
+        pan.setOffset({
+          x: direction === 'all' || direction === 'horizontal' ? pan.x._value : 0,
+          y: direction === 'all' || direction === 'vertical' ? pan.y._value : 0
+        })
         this.props.onDragStart && this.props.onDragStart()
       },
       onPanResponderMove: (e, gestureState) => {
+        const { direction } = this.props
         Animated.event(
           [
             null,
             {
-              ...(this.props.direction !== 'none' && this.props.direction !== 'vertical' ? { dx: this.state.pan.x } : {}),
-              ...(this.props.direction !== 'none' && this.props.direction !== 'horizontal' ? { dy: this.state.pan.y } : {}),
+              dx: direction === 'all' || direction === 'horizontal' ? this.state.pan.x : new Animated.Value(0),
+              dy: direction === 'all' || direction === 'vertical' ? this.state.pan.y : new Animated.Value(0),
             }
           ],
           {
@@ -79,13 +83,6 @@ class _MovableView extends React.Component<MovableViewProps, any> {
     pan.removeAllListeners()
   }
 
-  changeDisableStatus = (): void => {
-    const { disabled } = this.state
-    this.setState({
-      disabled: !disabled
-    })
-  }
-
   _onLayout = (event: LayoutChangeEvent): void => {
     const { width, height } = event.nativeEvent.layout
     this.W = width