無意間發(fā)現(xiàn)React的版本又更新到了0.51了揩悄。這又意味著某些群體面臨的踩坑時節(jié)的到來慷嗜。（啊哈哈哈Ｇ铉汀为迈！想想就覺得特別開心）
如此便來搶先看看RN公主這次又描的是哪處眉三椿。

用手動去計算偏移量并且下載定時器的方法去封裝輪播圖功能顯得太過繁瑣。正所謂他山之石可以攻玉葫辐。顯然搜锰，引用已經(jīng)封裝好的三方開源組件能讓我們在編寫代碼時事半功倍。而react-native-swiper正是一個能用于做輪播效果的三方組件耿战。

1蛋叼、github上的實例：

https://github.com/leecade/react-native-swiper

2、基本命令

• 安裝：npm i react-native-swiper --save

• 查看：npm view react-native-swiper

• 刪除：npm rm react-native-swiper --save

3剂陡、屬性

所有ScrollView組件擁有的屬性react-native-swiper都擁有狈涮。

• Basic

• Custom basic style & content

• Pagination

• AutoPlay

使用方式

• 引用外部組件

import Swiper from 'react-native-swiper';

• 在render方法中返回swiper組件
  showsButtons代表向左向右滑的指示按鈕

<Swiper style={styles.wrapper} showsButtons={true}>
            <View style={styles.slide1}>
                <Text style={styles.text}>Hello Swiper</Text>
            </View>
            <View style={styles.slide2}>
                <Text style={styles.text}>Beautiful</Text>
            </View>
            <View style={styles.slide3}>
                <Text style={styles.text}>And simple</Text>
            </View>
        </Swiper>

• 設(shè)置樣式
  設(shè)置每個view全屏顯示。view里面的內(nèi)容居中晕鹊。

wrapper: {
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    }

• 導(dǎo)入外部組件松却、通過Dimension獲取屏幕寬度。{width}代表ES6語法的解構(gòu)賦值

import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions
} from 'react-native';
import Swiper from 'react-native-swiper';
const {width} = Dimensions.get('window');  //解構(gòu)賦值 獲取屏幕寬度

• 在render方法中返回一個頂級組件View捏题。里面裝載兩個swiper
  第一個輪播圖設(shè)置為豎向滾動玻褪，第二個輪播圖設(shè)置為橫向滾動肉渴。同時設(shè)置他們自動播放公荧。

export default class App extends Component<{}> {
  render() {
    return (
        <View style={styles.container}>
            {/*設(shè)置horizontal為豎向排列 autoplay為自動播放*/}
             <Swiper style={styles.wrapper} height={200} horizontal={false} autoplay autoplayTimeout={1}  >
                <View style={styles.slide1}>
                    <Text style={styles.text}>Hello Swiper</Text>
                </View>
                <View style={styles.slide2}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>
                <View style={styles.slide3}>
                    <Text style={styles.text}>And simple</Text>
                </View>
            </Swiper>

            <Swiper style={styles.wrapper} height={240} autoplay
                    onMomentumScrollEnd={(e, state, context) => console.log('index:', state.index)}
                    dot={<View style={{backgroundColor:'rgba(0,0,0,.5)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
                    activeDot={<View style={{backgroundColor: 'yellow', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
                    paginationStyle={{
                        bottom: 23, left: null, right: 10
                    }}

                    loop>
                <View style={styles.slide} >
                    <Text numberOfLines={1}>Aussie tourist dies at Bali hotel</Text>
                    <Image resizeMode='stretch' style={styles.image} source={require('./img/1.jpg')} />
                </View>
                <View style={styles.slide}>
                    <Text numberOfLines={1}>Big lie behind Nine’s new show</Text>
                    <Image resizeMode='stretch' style={styles.image} source={require('./img/2.jpg')} />
                </View>
                <View style={styles.slide} >
                    <Text numberOfLines={1}>Why Stone split from Garfield</Text>
                    <Image resizeMode='stretch' style={styles.image} source={require('./img/3.jpg')} />
                </View>
                <View style={styles.slide}>
                    <Text numberOfLines={1}>Learn from Kim K to land that job</Text>
                    <Image resizeMode='stretch' style={styles.image} source={require('./img/4.jpg')} />
                </View>
            </Swiper>
        </View>
            </Swiper>
        </View>

    );
  }
}

• 設(shè)置樣式

const styles = StyleSheet.create({
    container: {
        flex: 1
    },

    wrapper: {
    },

    slide: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },

    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },

    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },

    image: {
        width:width,
        flex: 1
    }
});