在React Native中使用FlatList创建Carousel

Question

我正在使用FlatList在React Native中创建一个carousel组件，我使用useState钩子来控制图像的索引，图像正确加载，问题是我不能使用我的按钮来控制carousel。例如，当我第一次点击右箭头不工作，但当我再次点击它去下一张图片。下面是我的代码:

const { width: windowWidth, height: windowHeight } = Dimensions.get("window");
const slideList = Array.from({ length: 5 }).map((_, i) => {
return {
id: i.toString(),
image: `https://picsum.photos/1440/2842?random=${i}`,
};
});
const Carousel = () => {
const [current, setCurrent] = useState(0);
const length = slideList.length;
const flatListRef = useRef();
const renderItem = ({ item }) => {
const arr = Object.values( item );
return (
<View style={styles.imagesContainer}>
<Image style={styles.image} source={{ uri: item.image }} />
</View>
);
}
const goNextSlide = () => {
setCurrent(current < length -1 ? current + 1 : 0);
flatListRef.current.scrollToIndex({ index: current, animated: true });
};
const goPrevSlide = () => {
setCurrent(current <= length - 1 && current >= 0 ? current -1 : 0);
flatListRef.current.scrollToIndex({ index: current, animated: true });
};
console.log(current)
return (
<View style={styles.screen}>
<View style={styles.controls}>
<TouchableOpacity style={styles.controlleft} onPress={goPrevSlide}>
<CarouselLeftArrow style={styles.leftArrow} size={28} fill='black' />
</TouchableOpacity>
<TouchableOpacity style={styles.controlRight} onPress={goNextSlide}>
<CarouselRightArrow style={styles.rightArrow} size={28} fill='black' />
</TouchableOpacity>
</View>
<FlatList
data={slideList}
keyExtractor={item => item.id}
renderItem={renderItem}
horizontal={true}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
ref={flatListRef}
/>
</View>
)
}
const styles = StyleSheet.create({
imagesContainer: {
width: windowWidth,
height: 250
},
image: {
width: '100%',
height: '100%'
},
controls: {
backgroundColor: 'yellow',
flexDirection: 'row',
justifyContent: 'space-between',
position: 'absolute',
zIndex: 2,
width: '100%',
top: 100
},
controlLeft: {
},
controlRight: {
}
})
export default Carousel;

任何帮助都将是感激的。

Answer 1

1. goPrevSlide

   setCurrent(current <= length - 1 && current >= 0 ? current -1 : 0);

   当current >= 0不正确时，因为如果电流等于零，那么在这种情况下将-1设置为电流。替换setCurrent(current ? current - 1 : length - 1);

   语句

2. 由于更新状态是一个异步动作，你不能立即处理更新的变量，你需要使用effect钩子来捕获它。

   useEffect(() => {
   // fires every time when "current" is updated
   flatListRef.current.scrollToIndex({ index: current, animated: true });
   }, [current]);
   

   从两个处理程序中删除setCurrent函数

Answer 2

尝试给图像的宽度和高度，你需要如果来源是uri。

看到你的代码工作在小吃(没有按钮)