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

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

Answer 2

您可以使用此NPM module 来获得您想要的东西。该模块在 Android 和 iOS 中的工作方式相同。不要重新发明轮子:)

编辑：现在我明白你想要什么了。你可以尝尝我为你做的这种小吃：

https://snack.expo.io/r1qnxSt9m

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