React Native --- 生命周期、控件、定时器、轮播图

生命周期

大家创建一个新项目的时候，首先看到的就是 APP.js文件

引入头文件.png

这个内容是用来引用头文件的，大家需要什么控件、功能就要引入相应的文件，比如：需要使用一个按钮，那么

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button
} from

注册一个类.png

这部分内容是用来声明一个类的，

//导出一个App类
export default class App extends Component

render()

这个函数是用来刷新UI，它是个异步函数，因此你可以同时刷新多个render函数

属性

state={
        title:'默认值'
    }
//属性
    static defaultProps={
        age:18
    }

Props属性，相当于OC中的readOnly，只读属性嫁鸡随鸡
state属性，每一个组件有一个系统的setState方法，用来改变状态，而且会刷新界面，调用render函数

componentWillMount

相当于OC中的 viewWillAppear 在组件即将显示的时候会调用

componentDidMount

刷新完了UI之后进入 render方法调用之后多用于网络请求第一次加载的数据

componentDidUpdate

状态机state改变后就进入这个函数更新UI后调用，第一次加载UI的时候不会进入

轮播图

轮播图最主要的核心内容就是：ScrollView和定时器
在RN中使用ScrollView需要导入ScrollView组件，只需要在import中添加就行了
定时器需要导入react-timer-mixin组件，这个就需要终端导入，首先要进入目标文件，然后用终端执行npm I react-native-timer-mixin --save操作即可，使用法法如下

var React = require('react');
var TimerMixin = require('react-timer-mixin');

var Component = React.createClass({
  mixins: [TimerMixin],
  componentDidMount() {
    this.setTimeout(
      () => { console.log('I do not leak!'); },
      500
    );
  }
});

ScrollView

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

简易轮播图

简易轮播图.gif

第一步：创建ScrollView，加载图片
第二步：创建圆点区域
第三步：使用定时器
第四步：将scrollView和圆点联系起来

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

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

//引入定时器
var TimerMixin = require('react-timer-mixin');
var ImageData = require('./data.json');
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');

export default class App extends Component<{}> {
  //注册定时器
  mixins: [TimerMixin]

  state={
    currentPage:0
  }

  //初始化固定值
  static  defaultProps={
    //间隔时间  单位是毫秒
    duration:1000
  }
  render() {
    return (
        <View style={styles.container}>
          <ScrollView ref="scrollView"
                      horizontal={true}
                      showsVerticalScrollIndicator={false}
                      showsHorizontalScrollIndicator={false}
                      pagingEnabled={true}
                      //一帧动画结束后
                      onMomentumScrollEnd={(e)=>this.onScrollAnimationEnd(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 scrollView = this.refs.scrollView;
    var imageCount = ImageData.data.length;
    var obj = this;
    //2、设置定时器
    //开启定时器
    this.timer = setInterval(function () {//这里面this是window属性
      //2.1设置当前页
      var currentPage = 0;
      //2.2判断
      if ((obj.state.currentPage + 1) >= imageCount) {
        //清零
        currentPage =0;
      } else {
        currentPage = obj.state.currentPage + 1;
      }
      //2.3更新状态机
      obj.setState({
        currentPage:currentPage
      })

      //2.4滚动起来
      var offsetX = currentPage * width;
      scrollView.scrollTo({x:offsetX,y:0,animation:true})


    }, this.props.duration);
  }

  onScrollAnimationEnd(e){
    //拿到偏移量
    var offsetX = e.nativeEvent.contentOffset.x;

    //2、求出第几页
    var currentPage = Math.floor(offsetX/width);
    //2、更新状态机
    this.setState({
      currentPage:currentPage
    })

  }

  //返回小点点
  renderPage(){
    var style;
    //定义一个装点点的数组
    var pageArr = [];
    //拿到图片数组
    var imageArr = ImageData.data;

    for (var i=0; i<imageArr.length;i++){
      //判断
      style = (i==this.state.currentPage)?{
        color:'orange'}:{
        color: '#ffffff'}
      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 imageItem = imgsArr[i];
      //创建图片组件，到数组中
      allImage.push(
          <Image key={i}
                 source={{uri:imageItem.img}}
                 style={{width: width, height:200}}
          />
      )
    }
    return allImage;
  }
}

const styles = StyleSheet.create({
  container: {
  },

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

    //主轴方向
    flexDirection:'row',
    //对齐方式
    justifyContent:'flex-end',
    //居中
    alignItems:'center'

  }
});

代码讲解

import.png

在这里引入ScrollView，Image组件，AlertIOS组件是为了有提示，方便查错

引入文件.png

引入定时器，dataJson文件
Dimensions是用来获取屏幕宽度的

创建定时器、ScrollView、小圆点.png

注册定时器；
给定时器加个固定间隔，单位是毫秒
状态机（state）中记录这当前的currentPage第几页
创建ScrollView中有个 ref="scrollView"，这个是给scrollView加一个标签，根据标签获取相应的scrollView相当于tag

//是否水平
horizontal={true}
//是否显示垂直方向滚动条
showsVerticalScrollIndicator={false}
//是否显示水平方向滚动条
showsHorizontalScrollIndicator={false}
//是否分页
pagingEnabled={true}

renderAllImage()函数是用来创建scrollView中的图片，返回一个图片数组Image使用uri获取的时候，必须要加宽高
renderPage()函数用来创建小圆点，其中

style = (i==this.state.currentPage)?{
        color:'orange'}:{
        color: '#ffffff'}

是用来判断是否是选中的页，来使圆点变色

定时器绑定.png

绑定定时器，这里主要是开启定时器后，拿到scrollView的偏移量计算，
注意：在定时器中如果用this，这个是window属性，所以使用var obj = this;难道当前view的this