效果如下:
![](https://upload-images.jianshu.io/upload_images/9320442-4a222c0f793223d1.gif?imageMogr2/auto-orient/strip|imageView2/2/w/372/format/webp)
6iIb4SR.gif
使用插件: https://www.npmjs.com/package/react-native-snap-carousel
基础使用方法:
下载: $ npm install --save react-native-snap-carousel 引入: import Carousel from 'react-native-snap-carousel' 使用: const horizontalMargin = 20; const slideWidth = 280; const itemWidth = slideWidth + horizontalMargin * 2; const itemHeight = 200; export class MyCarousel extends Component { constructor(props) { super(props); this.state = { entries: [ { title: "安徒生童话" }, { title: "格林童话" }, { title: "我的童话"} ] } } _renderItem ({item, index}) { return ( <View style={styles.slide}> <Text style={styles.title}>{ item.title }</Text> </View> ); } render () { return ( <Carousel ref={(c) => { this._carousel = c; }} data={this.state.entries} renderItem={this._renderItem} sliderWidth={sliderWidth} itemWidth={itemWidth} /> ); } } const styles = StyleSheet.create({ slide: { borderRadius: 10 backgroundColor: '#992211' } }) 常用参数 <Carousel ref={(c) => { this._carousel = c; }} // 获取节点 inactiveSlideOpacity={1} // 不活动幻灯片的不透明度效果的值 inactiveSlideScale={0.7} // 不活动幻灯片的缩放效果的值 firstItem={0} // 第一个显示Item removeClippedSubviews={false} // 解决 IOS如果不滑动就不显示的额问题 data={this.state.cardList} renderItem={this._renderItem} sliderWidth={sliderWidth} // 轮播的宽度 itemWidth={itemWidth} // 单个Item的宽度 onSnapToItem={()=>{this.onSnapToItem()}} //导航到项目时触发回 /> 常用方法 获取当前显示Item的Index const carouselCurrIndex = this._carousel.currentIndex; 跳转到指定Item this._carousel.snapToItem(2) // 显示第二个item