推荐开源项目:React Native Snap Carousel
warning:
这篇文章距离上次修改已过186天,其中的内容可能已经有所变动。
React Native Snap Carousel 是一个为 React Native 打造的一个简洁、高性能的滑动轮播组件,支持 Android 和 iOS。
以下是一个简单的使用示例:
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Carousel from 'react-native-snap-carousel';
const MyCarousel = () => {
return (
<Carousel
data={[
{ key: 'a', color: '#f00' },
{ key: 'b', color: '#0f0' },
{ key: 'c', color: '#00f' },
]}
renderItem={({ item }) => <View style={[styles.slide, { backgroundColor: item.color }]} />}
sliderWidth={300}
itemWidth={300}
/>
);
};
const styles = StyleSheet.create({
slide: {
height: 200,
justifyContent: 'center',
alignItems: 'center',
},
});
export default MyCarousel;
在这个例子中,我们创建了一个简单的轮播,它包含三个带有不同背景颜色的滑块。Carousel
组件的 data
属性用于提供数据,renderItem
属性用于渲染每一个 slide,sliderWidth
和 itemWidth
分别设置了轮播的宽度和每个滑块的宽度。
评论已关闭