我创建了一个“圆条”( 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>
最佳答案
一开始很难获取代码,因为它们都在同一个位置。
我首先建议将代码分成更小的部分: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)
});
}
查看我在“选定”圆圈的“动画”圆圈上方添加的行
关于reactjs - 为什么我的动画 View 没有停留在 React Native 中的正确位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51674761/