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;

React Native 之轮播图swiper组件的更多相关文章

ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的点,达到自己想要的效果不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
angularjs指令实现轮播图----swiper
'use strict'; angular.module('app').directive('swipersLbt',swipers); swipers.$inject = ['$timeout']; ...
微信小程序之视图容器（swiper）组件创建轮播图
一.视图容器(Swiper) 1.swiper:滑块视图容器微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...
React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
微信小程序之 Swiper（轮播图）
1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图配置*/ imgUrls: [ 'http://im ...
vue2 使用 swiper 轮播图效果
第一步.先安装swiper插件 npm install swiper@3.4.1 --save-dev 第二步.组件内引入swiper插件 import Swiper from 'swiper' im ...
vue2.0 + vux （五）api接口封装及首页轮播图制作
1.安装 jquery 和 whatwg-fetch (优雅的异步请求API) npm install jquery --save npm install whatwg-fetch --save 2. ...
【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

随机推荐

python中各种数据类型
数字类型整型int 作用:年纪,等级,身份证号,qq号等与整型数字有关定义: age=10 #本质age=int(10) 浮点型float 作用:薪资,身高,体重等与浮点数相关 salary=3. ...
[LeetCode] 181. Employees Earning More Than Their Managers_Easy tag: SQL
The Employee table holds all employees including their managers. Every employee has an Id, and there ...
python-字符串前面添加u,r,b的含义
u/U:表示unicode字符串不是仅仅是针对中文, 可以针对任何的字符串,代表是对字符串进行unicode编码. 一般英文字符在使用各种编码下, 基本都可以正常解析, 所以一般不带u:但是中文, ...
[redis] 介绍安装
redis相关网站官方网站:http://redis.io/ redis简介官方介绍:http://redis.io/topics/introduction 百度百科:http://baike.b ...
xcode6 新建项目真机调试无法全屏
设置app ICons and Launch Images属性通过设置启动图片,选择一张适配的图片(Default-568@2x)作为启动页的图片,可以解决全屏的问题
UVM中的regmodel建模(三)
总结一下UVM中的寄存器访问实现: 后门访问通过add_hdl_path命令来添加寄存器路径,并扩展uvm_reg_backdoor基类,定义read与write函数,最后在uvm_reg_block ...
uva10905
/* 很好的字符串比较方法很多个字符串组成的数字需要最大然后比较 a和b 是比较a+b 和b+a 的大小 */ #include<cstdio> #include<s ...
Python 成对处理数据 zip()
当你想成对处理数据的时候zip() 函数是很有用的.比如,假设你头列表和一个值列表,就像下面这样: headers = ['name', 'shares', 'price'] values = ['A ...
Azkaban 入门
需求实际当中经常有这些场景:每天有一个大任务,这个大任务可以分成A,B,C,D四个小任务,A,B任务之间没有依赖关系,C任务依赖A,B任务的结果,D任务依赖C任务的结果.一般的做法是,开两个终端同 ...
python3.4学习笔记(一) 基本语法 python3不向下兼容，有些语法跟python2.x不一样
python3.4学习笔记(一) 基本语法 python3不向下兼容,有些语法跟python2.x不一样,IDLE shell编辑器,快捷键:ALT+p,上一个历史输入内容,ALT+n 下一个历史输入 ...

React Native 之轮播图swiper组件

React Native 之轮播图swiper组件的更多相关文章

随机推荐

热门专题