0

我试图在使用 renimatedV2 滚动时创建轮播效果，并且我意识到由于 useAnimatedStyle 挂钩依赖项，我无法将动画样式应用于视图。原因是它是一个钩子，我不能将它放在 renderItem 中。我需要将它放在 renderItem 内的原因是因为插值取决于项目的索引。有解决办法吗？当然，软件大厦中非常了不起的人在创建 renimatedV2 时考虑到了这一点，但我就是找不到解决方案。


 const animatedScale = useSharedValue(1)
    const animatedScaleStyle = useAnimatedStyle(() => {
        return {
            transform: [
                {
                    scale: animatedScale.value,
                },
            ],
        }
    })

    const renderItem = useCallback(({ item, index }) => {
        const inputRange = [-1, 0, 210 * index, 210 * (index + 0.5)]

        const scale = interpolate(animatedScale.value, inputRange, [1, 1, 1, 0])

        return (
            <Animated.View
                style={{
                    height: 200,
                    marginBottom: 10,
                    transform: [
                        {
                            scale: scale,
                        },
                    ],
                }}
            >
                <ThumbnailBig
                    ref={thumbnailRef}
                    images={item}
                    key={item.id}
                    oneEllipsisPressed={oneEllipsisPressed.bind(this, item.id)}
                />
            </Animated.View>
        )
    }, [])


    const onScroll = useAnimatedScrollHandler((event, context) => {
        const { y } = event.contentOffset\
        animatedScale.value = y
    })




return (
                   <AnimatedFlatList
                    ref={bigListRef}
                    data={image}
                    renderItem={render}
                    keyExtractor={keyExtractor}
                    onScrollEndDrag={handleScroll}
                    initialNumToRender={5}
                    maxToRenderPerBatch={5}
                    initialScrollIndex={scrollIndex}
                    onScrollToIndexFailed={scrollFailed}
                    windowSize={4}
                    contentContainerStyle={{
                        paddingBottom: 40,
                    }}
                    alwaysBounceVertical={false}
                    bounces={false}
                    onScroll={onScroll}
                    scrollEventThrottle={16}
                    extraData={refreshFlatlist}
                    style={styles.flatList}
                />
)
4

0 回答 0