React Native_React Native组件(ScrollView&轮播图)

记住ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动。

ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者。

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Alert,
  Button,
  ScrollView
} from 'react-native';

export default class Test4 extends Component{

    render(){
        return(

          <ScrollView
              horizontal={true}//横线滚动
              showsHorizontalScrollIndicator={false}//隐藏水平方向滚动条
              pagingEnabled={true}//分页显示
          >
              {this.renderChildView()}
          </ScrollView>
        );
    }

    //返回子组件
    renderChildView(){
        //数组
        var allChild = [];
        var colors =['red','green','blue','yellow','orange','purple'];
        //遍历
        for(var i=0;i<colors.length;i++){
            allChild.push(
                <View key={i} style={{backgroundColor:colors[i],width:420,height:120}}>
                    <Text>{i}</Text>
                </View>
            )
        }
        return allChild;
    }
}

const styles = StyleSheet.create({

});

图片轮播器

首先导入第三方定时器，打开终端

cd 项目目录

然后

npm i react-timer-mixin --save

新建lunboData.json文件

{
  "data":[
    {
      "img":"img_01",
      "title":"年薪25万,离你一步之遥"
    },
    {
      "img":"img_02",
      "title":"python从零基础到项目实战"
    },
    {
      "img":"img_03",
      "title":"实现你的梦想!"
    },
    {
      "img":"img_04",
      "title":"次世代游戏美术设计,开启世代风暴"
    },
    {
      "img":"img_05",
      "title":"探索设计本源,还原生活本质"
    }
  ]
}

把图片扔到iOS项目，首先适配iOS

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    AlertIOS,
} from 'react-native';

//引入json数据
var ImageData = require('./lunboData.json');
//引入定时器
var TimerMixin = require('react-timer-mixin');

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');


export default class Test extends Component {
    //注册定时器
    mixins:[TimerMixin];

    state={
        //当前页面
        currentPage:0,
    }
    //初始化固定值
    static defaultProps={
        //间隔时间  单位是毫秒!!
        duration:2000
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    ref="scrollView"
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    pagingEnabled = {true}
                    //一帧动画结束之后!!
                    onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
                    onScrollBeginDrag={()=>this.ScrollBeginDrag()}
                    onScrollEndDrag={()=>this.startTimer()}
                >
                    {this.renderAllImage()}
                </ScrollView>
                {/*指示器*/}
                <View style={styles.pageViewStyle}>
                    {/*5个小点*/}
                    {this.renderPage()}
                </View>
            </View>
        );
    }
    ScrollBeginDrag(){
        clearInterval(this.timer);
    }

    //UI加载完毕
    componentDidMount(){
        //开启定时器
        this.startTimer();
    }

    //开启定时器
    startTimer(){
        //写逻辑代码
        //1.拿到ScrollView

        var obj = this;
        var scrollView = obj.refs.scrollView;
        var imgCount = ImageData.data.length;
        //2.设置定时器
        this.timer = setInterval(function () {
            //2.1 设置当前页
            var currentPage = 0;
            //2.2 判断
            if((obj.state.currentPage + 1)>= imgCount){
                //清零
                currentPage = 0;
            }else{
                currentPage = obj.state.currentPage + 1;
            }


            //2.3 更新状态机
            obj.setState({
                currentPage:currentPage
            })


            //2.4 滚起来
            var offsetX = currentPage* width;

            scrollView.scrollResponderScrollTo({x:offsetX,y:0,animated:false});
            console.log(obj.state.currentPage);
            // console.log(offsetX);
        },this.props.duration);
    }


    //滚动完毕
    onAnimationEnd(e){
        //1.拿到偏移量
        var offsetX = e.nativeEvent.contentOffset.x;

        //2.求出当前第几页
        var currentPage = Math.floor(offsetX/width);

        //3.更新状态机
        this.setState({
            currentPage:currentPage
        });

    }

    //返回小点点
    renderPage(){
        var style;
        //点一个装点点的数组
        var pageArr = [];
        //拿到图片数组
        var imgsArr = ImageData.data;
        //遍历
        for(var i=0;i<imgsArr.length;i++){
            //判断
            style = (i==this.state.currentPage)?{color:'orange'}:{color:'#ffffff'};
            //给page加小先对象
            pageArr.push(
                <Text
                    key={i}
                    style={[{fontSize:25},style]}
                >&bull; </Text>
            )
        }
        //返回
        return pageArr;
    }

    //加载所有的图片
    renderAllImage(){
        //数组
        var allImage = [];
        //拿到图片数据
        var imgsArr = ImageData.data;
        //遍历
        for(var i=0;i<imgsArr.length;i++){
            //取出单个图片的数据!
            var imgItem = imgsArr[i];
            //创建图片组件到数组里面
            allImage.push(
                <Image
                    key={i}
                    source={{uri:imgItem.img}}
                    style={{width:width,height:150}}
                />
            )
        }
        //返回所有的图片
        return allImage;
    }
}

const styles = StyleSheet.create({
    container: {

    },
    pageViewStyle:{
        width:width,
        height:25,
        backgroundColor:'rgba(0,0,0,0.2)',
        //定位
        position:'absolute',
        bottom:0,

        //主轴方向
        flexDirection:'row',
        justifyContent:'flex-end',
        alignItems:'center'
    }

});

react-native-swiper 轮播图

$ npm install react-native-swiper --save

安装好之后 开始写代码，

1，引入第三方组件

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

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    Image,
    AlertIOS
} from 'react-native';

//引入json数据
var ImageData = require('./lunboData.json');
//引入定时器
var TimerMixin = require('react-timer-mixin');

var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

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

export default class Test extends Component {

    render() {
        return (
           <ScrollView>
               <Swiper height={200}
                       paginationStyle={{bottom:10}}
                       autoplay={true}
                       dot={<View style={{width:8,height:8,backgroundColor:'white',borderRadius:4,marginLeft:3,marginRight:3}}></View>}
                       activeDot={<View style={{width:8,height:8,backgroundColor:'orange',borderRadius:4,marginLeft:3,marginRight:3}}></View>}
               >
                   {this.renderImg()}
               </Swiper>
           </ScrollView>
        );
    }

    renderImg(){
        var imageViews=[];
        var imgsArr = ImageData.data;
        for(var i=0;i<imgsArr.length;i++){
            imageViews.push(
                <Image
                    key={i}
                    style={{flex:1}}
                    source={{uri:imgsArr[i].img}}
                />
            );
        }
        return imageViews;
    }

}

const styles = StyleSheet.create({
    container: {

    }

});