这是修改后的代码。
为了达到你的效果,我必须做的改变:
-
将卡片向左移动
-
立即重置位置以开始
-
重新启动动画
-
在useEffect清理函数中使用stopAnimation()添加了适当的清理
-
添加了一个带有溢出的clipContainer:“隐藏”以防止可见的跳跃
-
调整了卡片宽度计算以考虑利润
-
使用两套卡片(原件和复印件)实现无缝过渡
-
为两组卡添加了唯一密钥,以防止React警告
请确保您重新添加了图像/图标,因为我没有该文件,我删除了图标/图像代码和CSS进行调试。
import React, { useEffect, useRef } from 'react';
import { Animated, StyleSheet, Text, View, Dimensions } from 'react-native';
const cardData = [
{ id: 0, title: "Feeling Happy" },
{ id: 1, title: "Feeling Calm" },
{ id: 2, title: "Feeling Angry" },
{ id: 3, title: "Feeling Sad" },
];
const App = () => {
const translateX = useRef(new Animated.Value(0)).current;
const { width } = Dimensions.get('window');
const Cards = ({ item }) => {
return (
<View style={styles.cards_con}>
<Text style={styles.card_title}>{item.title}</Text>
</View>
);
};
useEffect(() => {
const cardWidth = 220;
const contentWidth = cardWidth * cardData.length;
const startAnimation = () => {
translateX.setValue(0);
Animated.sequence([
Animated.timing(translateX, {
toValue: -contentWidth,
duration: 17000,
useNativeDriver: true,
}),
Animated.timing(translateX, {
toValue: 0,
duration: 0,
useNativeDriver: true,
})
]).start(() => {
startAnimation();
});
};
startAnimation();
return () => {
translateX.stopAnimation();
};
}, []);
return (
<View style={styles.container}>
<View style={styles.clipContainer}>
<Animated.View
style={{
flexDirection: 'row',
transform: [{ translateX }],
}}
>
{/* Original set of cards */}
{cardData.map((item, index) => (
<Cards key={`original-${index}`} item={item} />
))}
{/* Duplicate set for seamless transition */}
{cardData.map((item, index) => (
<Cards key={`duplicate-${index}`} item={item} />
))}
</Animated.View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#000",
},
clipContainer: {
overflow: 'hidden',
width: '100%',
},
cards_con: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: "#323232",
height: 50,
borderRadius: 10,
marginHorizontal: 10,
padding: 10,
width: 200,
},
card_title: {
color: "#FFFFFF",
fontSize: 16,
},
});
export default App;