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