React Native如何将卡视图拖出滚动视图

Question

我目前正在使用scrollview保存所有卡片，例如

<ScrollView>
    <Card id={1}/>
    <Card id={2}/>
</ScrollView>

Card是一种自定义组件，基本上只是一个具有一定宽度和高度的视图。我使用Panresponder来定义阻力动画，然后将操作器连接到每个卡上。

this._panResponder = PanResponder.create({
      onPanResponderGrant: (e, gestureState) => {
          this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value});
      },
      onPanResponderMove: Animated.event([
        null, {dx: this.state.pan.x, dy: this.state.pan.y},
      ]),
      onPanResponderRelease: (e, {vx, vy}) => {
        this.state.pan.flattenOffset()
      }
});

因此，Card组件只会像

一样呈现动画视图

    <Animated.View {...this._panResponder.panHandlers}>
       ...
    </Animated.View>

我可以在滚动视图中的任何位置拖动卡片，零件覆盖了滚动视图。我如何在滚动浏览浏览的顶部制作卡，然后我可以在屏幕上的任何地方拖动并显示它。

当我将ScrollView更改为View时，我发现的有趣的是，可以将Card拖放到View的顶部。它仅在iOS上起作用，Android仍然与ScrollView相同。

Answer 1

您要做的事情在Android上无法使用。这是因为RN不支持Android中的overflow:visible。

溢出样式属性默认为隐藏，并且无法在Android上更改

这意味着您必须使用容器视图的层次结构，并想到将卡片包含在更大容器中或重复到另一层中的卡片的解决方法。