如何在React Native中重建iOS Picker动画

Question

React Native中是否有一种方法可以完全用Java Script重建iOS选择器组件？我不需要通用的选择器，而是具有类似于iOS选择器的淡出效果的普通滚动视图。

编辑-我认为我对初始答案的解释不够充分。这就是为什么我在这里完成它的原因：

我想构建一个可以覆盖整个屏幕的滚动视图。它不应该像iOS Picker那样使用户可以选择某些项目。不过，它应该是“正常”滚动视图，向用户显示一些信息，例如不同的聊天，任务，新闻等等。

与React Native普通滚动视图的唯一区别应该是顶部的淡出效果：当用户向上滚动内容时，它不仅应将屏幕留在顶部边缘，还应使用iOS Picker的淡出效果（请参见图片）。

此淡出效果由两部分组成：首先，它通过减小y坐标来提高内容的透明度。此外，这些内容似乎已经进入了三维。

我的问题是，我看不到在React Native中实现内容的三维性的方法。我必须补充一点，滚动视图中的内容不是由大小相等的小项目组成（例如文本“项目1”，“项目2”，“项目3”等），而是更大的项目图片或整个文本框等大小不同的项目。

Answer 1

您可以使用此NPM module获取所需的内容。该模块在Android和iOS中的工作原理相同。不要重新发明轮子：）

编辑：现在我已经了解了您想要什么。您可以尝试我为您准备的这种小吃：

https://snack.expo.io/r1qnxSt9m

您当然需要改进它，但这是一个开始。

Answer 2

您可以使用动画api实现所需的效果。想法是为列表中的项目设置不同的输入范围。然后，您可以将不透明度挂钩到ScrollView（或任何列表组件）的滚动值。我已经简化了代码，但是足以证明这个想法。

下面的示例仅演示了不透明效果，但是您可以轻松添加平移效果以获得所需的确切动画。

const data = []; // array that contains the text
const items = [];
for (let i = 0; i < data.length; ++i) {
  const distanceFromViewCenter = Math.abs(i * ITEM_HEIGHT);
  const inputRange = [
    -distanceFromViewCenter - 2 * ITEM_HEIGHT,
    -distanceFromViewCenter - ITEM_HEIGHT,
    -distanceFromViewCenter, // Middle of picker            
    -distanceFromViewCenter + ITEM_HEIGHT,
    -distanceFromViewCenter + 2 * ITEM_HEIGHT,
  ];
  items.push(
    <Animated.View
      style={{
        opacity: this._scrollValue.interpolate({
          inputRange,
          outputRange: [0.0, 0.3, 1.0, 0.3, 0.0],
        }),
      }}
    >
      <Text style={{ height: ITEM_HEIGHT }}>{data[i]}</Text>
    </Animated.View>
  )
}

<ScrollView
  onScroll={Animated.event(
    [{ nativeEvent: { contentOffset: { y: this._scrollValue } } }],
    { useNativeDriver: true }
  )}
>
  {items}
</ScrollView>