Я создал "круг" (группа просмотров), которые переключаются с серого на желтый, когда движутся изображения. Круги начинают правильно преобразовываться, а затем возвращаются к первому пятну вместо того, чтобы идти к следующему кругу, чтобы указать, что вы находитесь на следующем изображении. Желтый круг всегда возвращается к первому месту, несмотря ни на что. Кто-нибудь знает, почему это может произойти? Как мне заставить его остаться в следующем месте?
ПОЖАЛУЙСТА, см. Это видео, которое я сделал из него: https://youtu.be/BCaSgNexPAs
Вот как я создаю и обрабатываю преобразования круглых представлений:
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>