【原创】东方耀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’,
}
});