ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS

1. npm install react-native-carousel --save git 地址Properties

    

    

    

    

    

   hideIndicators={false} // Set to true to hide the indicators

   indicatorColor="#FFFFFF" // Active indicator color

   indicatorSize={20} // Indicator bullet size

   indicatorSpace={15} // space between each indicator

   inactiveIndicatorColor="#999999" // Inactive indicator color

   indicatorAtBottom={true} // Set to false to show the indicators at the top

   indicatorOffset={250} // Indicator relative position from top or bottom

   onPageChange={callback} // Called when the active page changes

   ​

   animate={true} // Enable carousel autoplay

   delay={1000} // Set Animation delay between slides

   loop={true} // Allow infinite looped animation. Depends on Prop {...animate} set to true.

    

2. 新建Swiper.js 创建组件

    

    

    

    

    

   'use strict';

   var React = require('react-native');

   var Carousel = require('react-native-carousel');

   ​

   var {

     AppRegistry,

     StyleSheet,

     Text,

     View,

     Image,

   ​

   } = React;

   ​

   ​

   ​

   var Swiper = React.createClass({

     render: function() {

   ​

       return (

         <Carousel   width={this.props.dwidth}  indicatorAtBottom={false} indicatorOffset={110} indicatorSize={20}  indicatorSpace={16}  delay={3000} >

           <View style={styles.swipeContainer}>

           <Image

               style={styles.image}

               resizeMode={Image.resizeMode.stretch}

               source={{uri: this.props.data[0],width:this.props.dwidth}}/>

           </View>

           <View style={styles.swipeContainer}>

           <Image

                 style={styles.image}

                 resizeMode={Image.resizeMode.stretch}

                 source={{uri: this.props.data[1],width:this.props.dwidth}}/>

           </View>

           <View style={styles.swipeContainer}>

           <Image

                  style={styles.image}

                  resizeMode={Image.resizeMode.stretch}

                  source={{uri: this.props.data[2],width:this.props.dwidth}}/>

           </View>

         </Carousel>

       );

     }

   ​

   });

   ​

   ​

   const styles = StyleSheet.create({

   ​

     swipeContainer: {

       alignItems: 'center',

       backgroundColor: 'transparent',

     },

    image:{

         height:128,

    }

   });

   module.exports = Swiper;

   ​

    

3. 使用刚刚创建的组件

    

    

    

    

    

   render() {

       var {height, width} = Dimensions.get('window');//适应各种尺寸

       return (

       <View style={styles.container}>

       <View style={{ height:128,}}>

       <Swiper data={sliderImgs} dwidth={width} ></Swiper>

       </View>

       <View style={{ height:128,backgroundColor:'white'}}>

         <ToolsBar bardata={this.state.toolsdata} ></ToolsBar>

       </View>

       <View style={{ height:120,backgroundColor:'white'}}>

       </View>

       </View>

       );

     }

    

百度云盘

React Native 技术交流群127482131,欢迎大家一起来学习RN。

转载请保留文章链接 http://www.reactnative.pw/