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

时间：2022-12-28 22:04:59

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/

相关文章