如何在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

您可以使用Animated 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>