有没有办法在ScrollView中为项目建立索引？

问题描述

This 是我想要实现的确切动画

我正在尝试使用Animated API来实现Carousel动画。 我目前的进展部分基于Advanced React Native FlatList animations at 60fps with Animated API。 区别在于，我只在react-native-paper中渲染3张卡片，因此尝试在ScrollView中实现它。

我想为3张卡片建立索引，类似于使用FlatList中的renderItem。

我尝试设置索引onScroll，即：

onScroll={(event) => {
            Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }],{
              useNativeDriver: true,})
            setIndex(parseInt(event.nativeEvent.contentOffset.x / Dimensions.get('window').width))
          }}

但这并没有成功，因为它会为所有3张卡片设置动画

完整代码：

export default function SellerDash({ navigation }) {
  const [index,setIndex] = useState(0)
  const AnimatedCard = Animated.createAnimatedComponent(Card)
  const scrollX = React.useRef(new Animated.Value(0)).current
  const inputRange = [(index - 2) * ITEM_SIZE,(index - 1) * ITEM_SIZE,index * ITEM_SIZE]
  const translateY = scrollX.interpolate({
    inputRange,outputRange: [0,-20,0],})
  return (
    <>
      <SafeAreaView style={styles.container}>
        <Animated.ScrollView
          showsHorizontalScrollIndicator={false}
          horizontal
          contentContainerStyle={{
            alignItems: 'center',}}
          snapToInterval={ITEM_SIZE}
          snapToAlignment="start"
          decelerationRate={0}
          bounces={false}
          onScroll={(event) => {
            Animated.event([{ nativeEvent: { contentOffset: { x: scrollX } } }],})
            setIndex(parseInt(event.nativeEvent.contentOffset.x / Dimensions.get('screen').width))
          }}
          scrollEventThrottle={16}
        >
          <AnimatedCard style={{ ...styles.card,transform: [{ translateY }] }}>
            <Card.Cover
              style={styles.image}
              source={{
                uri:
                  'https://images.example.com/1',}}
            />
          </AnimatedCard>

          <AnimatedCard style={{ ...styles.card,transform: [{ translateY }] }}>
            <Card.Cover 
              style={styles.image} 
              source={{ uri: 'https://images.example.com/2' }} 
            />
          </AnimatedCard>

          <AnimatedCard style={{ ...styles.card,transform: [{ translateY }] }}>
            <Card.Cover
              style={styles.image}
              source={{
                uri:
                  'https://images.example.com/3',}}
            />
          </AnimatedCard>
        </Animated.ScrollView>

      </SafeAreaView>
    </>
  )
}

任何帮助将不胜感激：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）