reactjs - 为什么我的动画 View 没有停留在 React Native 中的正确位置？

Question

我创建了一个“圆条”( View 组)，随着图像移动，它从灰色切换到黄色。圆圈开始正确变换，但随后返回到第一个点，而不是转到下一个圆圈点，以指示您位于下一张图像上。无论如何，黄色圆圈总是回到第一个位置。有谁知道为什么会发生这种情况？我如何让它留在下一个位置？

请观看我用它制作的视频:https://youtu.be/BCaSgNexPAs

以下是我创建和处理圆形 View 转换的方法:

    let circleArray = [];

    if (this.state.imgArray) {
        this.state.imgArray.forEach((val, i) => {
            const scrollCircleVal = this.imgXPos.interpolate({
                inputRange: [deviceWidth * (i - 1), deviceWidth * (i + 1)],
                outputRange: [-8, 8],
                extrapolate: 'clamp',
            });

            const thisCircle = (
                <View
                    key={'circle' + i}
                    style={[
                        styles.track,
                        {
                            width: 8,
                            height: 8,
                            marginLeft: i === 0 ? 0 : CIRCLE_SPACE,
                            borderRadius: 75

                        },
                    ]}
                >
                    <Animated.View
                        style={[
                            styles.circle,
                            {
                                width: 8,
                                height: 8,
                                borderRadius: 75,
                                transform: [
                                    {translateX: scrollCircleVal},
                                ],
                                backgroundColor: '#FFD200'
                            },
                        ]}
                    />
                </View>
            );
            circleArray.push(thisCircle)
        });
    }

这是我如何处理图像滑动的代码:

handleSwipe = (indexDirection) => {
    if (!this.state.imgArray[this.state.imgIndex + indexDirection]) {
        Animated.spring(this.imgXPos, {
            toValue: 0
        }).start();
        return;
    }

    this.setState((prevState) => ({
        imgIndex: prevState.imgIndex + indexDirection
    }), () => {
        this.imgXPos.setValue(indexDirection * this.width);
        Animated.spring(this.imgXPos, {
            toValue: 0
        }).start();
    });
}

imgPanResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (e, gs) => {
        this.imgXPos.setValue(gs.dx);
    },
    onPanResponderRelease: (e, gs) => {
        this.width = Dimensions.get('window').width;
        const direction = Math.sign(gs.dx);

        if (Math.abs(gs.dx) > this.width * 0.4) {
            Animated.timing(this.imgXPos, {
                toValue: direction * this.width,
                duration: 250
            }).start(() => this.handleSwipe(-1 * direction));
        } else {
            Animated.spring(this.imgXPos, {
                toValue: 0
            }).start();
        }
    }
});

HTML:

<Animated.Image 
    {...this.imgPanResponder.panHandlers}
    key={'image' + this.state.imgIndex}
    style={{left: this.imgXPos, height: '100%', width: '100%', borderRadius: 7}}
    resizeMethod={'scale'}
    resizeMode={'cover'}
    source={{uri: this.state.imgArray[this.state.imgIndex]}}
/>
<View style={styles.circleContainer}>
    {circleArray}
</View>

Answer 1

一开始很难获取代码，因为它们都在同一个位置。

我首先建议将代码分成更小的部分:ImageView、CirclesView

现在，在我们完成之后，我想尝试使 CirclesView 更简单一些(除非您真的希望这个动画 View 位于圆圈内)。

但是从您的代码中，我没有看到“selectedImage”(imgIndex)的差异

因为它对每个索引进行计算，但没有引用所选图像。

我认为与当前代码有关的粗略代码:

    let circleArray = [];

    if (this.state.imgArray) {
        this.state.imgArray.forEach((val, i) => {
            const scrollCircleVal = this.imgXPos.interpolate({
                inputRange: [deviceWidth * (i - 1), deviceWidth * (i + 1)],
                outputRange: [-8, 8],
                extrapolate: 'clamp',
            });

            const thisCircle = (
                <View
                    key={'circle' + i}
                    style={[
                        styles.track,
                        {
                            width: 8,
                            height: 8,
                            marginLeft: i === 0 ? 0 : CIRCLE_SPACE,
                            borderRadius: 75

                        },
                    ]}
                >

                   // LOOK AT THIS LINE BELOW

                   {this.state.imgIndex == i &&
                    <Animated.View
                        style={[
                            styles.circle,
                            {
                                width: 8,
                                height: 8,
                                borderRadius: 75,
                                transform: [
                                    {translateX: scrollCircleVal},
                                ],
                                backgroundColor: '#FFD200'
                            },
                        ]}
                    />}
                </View>
            );
            circleArray.push(thisCircle)
        });
    }

查看我在“选定”圆圈的“动画”圆圈上方添加的行