React Native 之輪播圖swiper組件

注釋：swiper組件是第三方組件 所以在使用之前應該先在命令行安裝，然后將第三方的模塊引入（第三方模塊地址：https://github.com/leecade/react-native-swiper）

1.$ npm i react-native-swiper --save 

2.$ npm i react-native -g

安裝完成后，我們需要完成輪播功能。因為可以到github看看swiper暴露的接口和參數。github地址是：https://github.com/leecade/react-native-swiper

注釋：本案例的圖片需要改成本地的（下面的代碼因為懶所以就沒改） （1）引入swiper,前面也提到了require. var Swiper = require('react-native-swiper'); （2）使用swiper,將輪播圖封裝成單獨的組件 var sliderImgs = [ 'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png', 'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png', 'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg' ]; var Slider = React.createClass({ render: function(){ return ( <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={150} showsPagination={false}> <Image style={[styles.slide,]} source={{uri: sliderImgs[0]}}></Image> <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image> <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image> </Swiper> ); } }); (3)這樣我們可以直接在render的時候直接用：<Slider/>
地址：http://vczero.github.io/react_native/%E7%AC%AC4%E7%AF%87react-native%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98%EF%BC%88%E4%BA%8C%EF%BC%89.html
具體代碼：1：在index.ios.js里面：

import React,{Component}from 'react';
import {
   NavigatorIOS,
   AppRegistry,
   StyleSheet,
} from 'react-native';
var Index = require('./pages/Index');
class NV extends Component{
  render(){
    return(
      <NavigatorIOS
               style={styles.container}
               initialRoute={{
                   title: '攜程首頁',
                   component: Index,
               }}
           />
    )
  }
}
var styles=StyleSheet.create({
  container:{
    flex:1,
    
  }
})
AppRegistry.registerComponent('Allen', () => NV)

　　在同目錄的page文件夾的Index.js是：

import React,{Component}from 'react';
var Swiper = require('react-native-swiper');
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  ScrollView,

} from 'react-native';


var Swiper=require('react-native-swiper')



var sliderImgs = [
	'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
	'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
	'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
];

var BUIcon = [
	'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/%E6%9C%AA%E6%A0%87%E9%A2%98-1.png',
	'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/feiji.png',
	'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/lvyou.png',
	'https://raw.githubusercontent.com/vczero/vczero.github.io/master/ctrip/gonglue.png'

];

var Images = [
	'http://webresource.c-ctrip.com/ResCRMOnline/R5/html5/images/zzz_pic_salead01.png',
	'http://images3.c-ctrip.com/rk/apph5/B1/201505/app_home_ad06_310_120.jpg'
];

var sliderImgs = [
  'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png',
  'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
  'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
];
var Slider = React.createClass({
  	render: function(){
	    return (
	      <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={150} showsPagination={false}>
	        <Image style={[styles.slide,]} source={require('../img/zjl.jpg')}></Image>
	        <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image>
	        <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image>
	      </Swiper>
	    );
  	}
});


var Index = React.createClass({
  //onPress={this.showDetail}
  // showDetail: function(){
  //   this.props.navigator.push({
  //     title: '詳情頁',
  //     component: Detail,
  //   });
  // },
  render: function() {
    return (
      <ScrollView>
      <View style={styles.container}>
        <Slider/>

        <View style={[styles.sbu_red, styles.sbu_view]}>
        	<TouchableHighlight underlayColor={'#FA6778'} style={{flex:1}}>
	        	<View style={[styles.sbu_flex, styles.sbu_borderRight]}>
	        		<View style={[styles.sub_con_flex, styles.sub_text]}>
	        			<Text style={[styles.font16]}>酒店</Text>
	        		</View>
	        		<View style={[styles.sub_con_flex]}>
	        			<Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[0]}}></Image>
	        		</View>
	        	</View>
	        </TouchableHighlight>
        	<View style={[styles.sbu_flex, styles.sbu_borderRight]}>
        		<View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
        			<Text style={[styles.font16]}>海外</Text>
        		</View>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>周邊</Text>
        		</View>
        	</View>
        	<View style={[styles.sbu_flex]}>
        		<View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
        			<Text style={[styles.font16]}>團購.特惠</Text>
        		</View>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>客棧.公寓</Text>
        		</View>
        	</View>
        </View>

        <View style={[styles.sbu_view, styles.sbu_blue]}>
        	<View style={[styles.sbu_flex, styles.sbu_borderRight]}>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>機票</Text>
        		</View>
        		<View style={[styles.sub_con_flex]}>
        			<Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[1]}}></Image>
        		</View>
        	</View>
        	<View style={[styles.sbu_flex, styles.sbu_borderRight]}>
        		<View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
        			<Text style={[styles.font16]}>火車票</Text>
        		</View>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>接收機</Text>
        		</View>
        	</View>
        	<View style={[styles.sbu_flex]}>
        		<View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
        			<Text style={[styles.font16]}>汽車票</Text>
        		</View>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>自駕.專車</Text>
        		</View>
        	</View>
        </View>

        <View style={[styles.sbu_view, styles.sbu_green]}>
        	<View style={[styles.sbu_flex, styles.sbu_borderRight]}>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>旅游</Text>
        		</View>
        		<View style={[styles.sub_con_flex]}>
        			<Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[2]}}></Image>
        		</View>
        	</View>
        	<View style={[styles.sbu_flex, styles.sbu_borderRight]}>
        		<View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
        			<Text style={[styles.font16]}>門票.玩樂</Text>
        		</View>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>出境WiFi</Text>
        		</View>
        	</View>
        	<View style={[styles.sbu_flex]}>
        		<View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
        			<Text style={[styles.font16]}>郵輪</Text>
        		</View>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>簽證</Text>
        		</View>
        	</View>
        </View>
        <View style={[styles.sbu_view, styles.sbu_yellow]}>
        	<View style={[styles.sbu_flex, styles.sbu_borderRight]}>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>攻略</Text>
        		</View>
        		<View style={[styles.sub_con_flex]}>
        			<Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[3]}}></Image>
        		</View>
        	</View>
        	<View style={[styles.sbu_flex, styles.sbu_borderRight]}>
        		<View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
        			<Text style={[styles.font16]}>周末游</Text>
        		</View>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>禮品卡</Text>
        		</View>
        	</View>
        	<View style={[styles.sbu_flex]}>
        		<View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}>
        			<Text style={[styles.font16]}>美食.購物</Text>
        		</View>
        		<View style={[styles.sub_con_flex, styles.sub_text]}>
        			<Text style={[styles.font16]}>更多</Text>
        		</View>
        	</View>
        </View>
        <View style={[styles.img_view]}>
        	<View style={[styles.img_flex, {borderRightWidth:0.5}]}>
        		<Image style={[styles.img_wh]} source={{uri:Images[0]}}></Image>
        	</View>
        	<View style={[styles.img_flex, {borderLeftWidth:0,}]}>
            <Image style={[styles.img_wh]} source={{uri:Images[1]}}></Image>
        	</View>
        </View>
      </View>
      </ScrollView>
    );
  }
});
var styles = StyleSheet.create({
	//container
  	container:{
    	backgroundColor:'#F2F2F2',
    	flex:1,
  	},
  	//slider
  	wrapper: {
    	height:80,
  	},
  	slide: {
    	height:80,
    	resizeMode: Image.resizeMode.contain,
  	},
  	//sbu
  	sbu_view:{
  		height:84,
  		marginLeft: 5,
  		marginRight:5,
  		borderWidth:1,
  		borderRadius:5,
  		marginBottom:10,
  		flexDirection:'row',
  	},
  	sbu_red:{
  		backgroundColor: '#FA6778',
  		borderColor:'#FA6778',
  		marginTop:-70,
  	},

  	sbu_blue:{
  		backgroundColor: '#3D98FF',
  		borderColor:'#3D98FF',
  	},

  	sbu_green:{
  		backgroundColor: '#5EBE00',
  		borderColor:'#5EBE00',
  	},

  	sbu_yellow:{
  		backgroundColor: '#FC9720',
  		borderColor:'#FC9720',
  	},
  	sbu_flex:{
  		flex:1,
  	},
  	sbu_borderRight:{
  		borderColor:'#fff',
  		borderRightWidth: 0.5,
  	},
  	sbu_icon_img:{
  		height:40,
  		width:40,
  		resizeMode:Image.resizeMode.contain,
  	},
  	sub_con_flex:{
  		flex:1,
  		justifyContent: 'center',
  		alignItems: 'center',
  	},
  	sub_text:{
  		justifyContent:'center',
  	},
  	font16:{
  		fontSize:17,
  		color:'#FFF',
  		fontWeight:'900',
  	},
  	sbu_borderBottom:{
  		borderBottomWidth:0.5,
  		borderBottomColor:'#fff',
  	},
  	img_view:{
  		height:62,
  		marginLeft:5,
  		marginRight:5,
  		flexDirection: 'row',
      marginBottom:20,
      backgroundColor:'#fff',
  	},
  	img_flex:{
  		flex:1,
  		borderWidth:1,
  		borderColor:'#ccc',
  	},
  	img_wh: {
  		height:59,
      borderRightWidth:0,
  		resizeMode:Image.resizeMode.contain,
  	}
});



module.exports = Index;