Question

我的项目是一个基于PanResponder的动画视图。 Animated.View具有三个子组件。

当我将动画视图拖动到顶部（并且子组件不在屏幕视线范围内）时，子内容越来越短。

但是拖到底部没问题。

请问是怎么回事？谢谢！

=======

屏幕截图视频：

drag child: no problem

drag child: Problem occur when dragging

=====

来源：

完整代码：

drag panel

child component

显示的主要代码：

    <View style={styles.draggableContainer}>
      <Animated.View
        onLayout={this.onLayout}
        {...this.panResponder.panHandlers}
        style={[
          this.pan.getLayout(),
          styles.aniView,
        ]}>
        {this.renderChildren()}
      </Animated.View>
    </View>



renderChildren = () => {
  const { source } = this.state;
  const children = source.map((item, index) => {
    return (
      <View key={item.toString()}
        style={{
          width: WIDTH,
          height: HEIGHT / 3,
          flex: 1,
          borderWidth: 1,
        }}>
        <ChildContent title={item} />
      </View>
    );
  });
  return children;
}

componentWillMount() {
  this.pan.addListener((value) => {
    this._value = value;
  });
  this.panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onMoveShouldSetPanResponder: (evt, gestureState) => ((gestureState.dx != 0) && (gestureState.dy != 0)),
    onPanResponderGrant: (e, gestureState) => {
      this.pan.setOffset({ x: this._value.x, y: this._value.y });
      this.pan.setValue({ x: 0, y: 0 });
    },
    onPanResponderMove: Animated.event([null, {
      dx: this.pan.x,
      dy: this.pan.y,
    }]),
    onPanResponderRelease: (e, gesture) => {
      this.pan.flattenOffset();
      this.animatePanel();
    }
  });
}

环境：操作系统：macOS High Sierra 10.13.6

Answer 1

我找到了解决方法：

更新为本机反应0.56。
（使用react-native-git-upgrade，并将babel-preset-react-native更新为5.0.2）。

然后问题消失了。

为什么子组件变短？

1 个答案: