【原创】东方耀reactnative 视频26之-react-native-swiper

github上搜索 react-native-swiper

在项目的根目录（即package.json文件所在的目录）

npm的命令：

安装模块：npm i react-native-swiper –save

查看模块：npm view react-native-swiper

删除模块：npm rm react-native-swiper –save

查看帮助命令：npm help 命令

---

homeUI.js

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/

import React, { Component } from ‘react’;
import {
AppRegistry,
StyleSheet,

Text,

Image,
View
} from 'react-native';

import Swiper from ‘react-native-swiper’;
//var REQUEST_URL=”https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json”;

export default class HomeUI extends Component{

constructor(props){
super(props);//这一句不能省略，照抄就行

}

render(){


    return (
        <Swiper style={styles.wrapper} showsButtons={true}  index = {1} autoplay={true}>
            <View style={styles.slide1}>

                <Image

                    style={{width:200,height:300}}
                    resizeMode='stretch'
                    source={{uri:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'}}
                    />
            </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>

    );

}

}

const styles = StyleSheet.create({
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’,
}
});