React Native 如何将卡片视图拖出 ScrollView

Question

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

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

Card 是一个自定义组件，它基本上只是一个具有一定宽度和高度的视图。 我使用 PanResponder 来定义拖动动画并将处理程序附加到每个 Card。

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 作为 documented。

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

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