React Native 之轮播图swiper组件

2024-03-30 08:04•html•阅读 2266

注释：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 ../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;

上一篇 »HTML/CSS，轮播图 - 小柴同学
下一篇 »CSS3 实现简单轮播图 - 橙zz

React Native 之轮播图swiper组件

相关推荐

css轮播图

CSS3实现轮播图效果2

JavaScript左右焦点轮播图

JavaScript技巧——轮播图

angular项目使用Swiper组件Loop时 ng-click点击事件失效处理方法

react-native学习笔记——ViewStack组件

bootstrap-03 常用重要组件，2

bootstrap轮播图