react-native-snap-carousel 轮播

效果如下：

 

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