React Native 椭圆滚动答案

【问题标题】：React Native Oval ScrollReact Native 椭圆滚动
【发布时间】：2021-10-21 11:57:06
【问题描述】：

我怎样才能做一个类似的椭圆形滚动？

我可以用什么来做这个？

【问题讨论】：

我从未听说过椭圆形卷轴，我什至尝试用谷歌搜索“椭圆形卷轴”，但我也找不到任何东西。目前尚不清楚您要达到的目标
这是一个列表，例如，由 20 个项目组成，滚动应该像图片一样呈椭圆形
我觉得他需要something like that

标签： react-native scroll scrollview flatlist

【解决方案1】：

基于你想要this之类的假设，我写了一个simple example

如果有一天链接失效了，下面我再附上代码

import React, { useCallback, useState, useRef } from "react";
import {
  FlatList,
  Text,
  View,
  StyleSheet,
  Dimensions,
  Animated
} from "react-native";

const { height } = Dimensions.get("window");
const screenMiddle = height / 2;
const itemScaleOffset = height / 3;

const DATA = new Array(20).fill(0).map((...args) => ({
  id: args[1],
  title: args[1]
}));
// args[1] is an index, just I hate warnings

const Item = ({ title, offsetY }) => {
  const [scrollEdges, setScrollEdges] = useState({
    top: 0,
    middle: 0,
    bottom: 0
  });

  const onLayout = useCallback(
    ({
      nativeEvent: {
        layout: { top, height }
      }
    }) =>
      setScrollEdges((edges) => ({
        ...edges,
        top: top - itemScaleOffset - screenMiddle,
        middle: top + height / 2 - screenMiddle,
        bottom: top + height + itemScaleOffset - screenMiddle
      })),
    []
  );

  const scale = offsetY.interpolate({
    inputRange: [scrollEdges.top, scrollEdges.middle, scrollEdges.bottom],
    outputRange: [0.66, 1, 0.66],
    extrapolate: "clamp"
  });

  return (
    <Animated.View
      onLayout={onLayout}
      style={[
        {
          transform: [
            {
              scale
            }
          ]
        },
        styles.item
      ]}
    >
      <Text style={styles.title}>{title}</Text>
    </Animated.View>
  );
};

const keyExtractor = ({ id }) => id.toString();

const App = () => {
  const offsetY = useRef(new Animated.Value(0)).current;

  const renderItem = useCallback(
    ({ item: { title } }) => <Item title={title} offsetY={offsetY} />,
    [offsetY]
  );

  return (
    <View style={styles.app}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        onScroll={Animated.event(
          [
            {
              nativeEvent: {
                contentOffset: {
                  y: offsetY
                }
              }
            }
          ],
          {
            useNativeDriver: false
          }
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  app: {
    flex: 1
  },
  item: {
    backgroundColor: "#f9c2ff",
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16
  },
  title: {
    fontSize: 32
  }
});

export default App;

【讨论】：

【解决方案2】：

我认为你应该使用 Reanimated 2，它具有非常简单的 sintaxis 和非常强大的功能。也许与 RNGestureHandler 结合使用。

【讨论】：