生命周期
大家創(chuàng)建一個新項目的時候，首先看到的就是 APP.js文件
這個內(nèi)容是用來引用頭文件的，大家需要什么控件、功能就要引入相應(yīng)的文件，比如：需要使用一個按鈕，那么
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button
} from
這部分內(nèi)容是用來聲明一個類的，
//導(dǎo)出一個App類
export default class App extends Component
render()
這個函數(shù)是用來刷新UI，它是個異步函數(shù)，因此你可以同時刷新多個render函數(shù)
屬性
state={
title:'默認(rèn)值'
}
//屬性
static defaultProps={
age:18
}
Props屬性，相當(dāng)于OC中的readOnly，只讀屬性 嫁雞隨雞
state屬性，每一個組件有一個系統(tǒng)的setState方法，用來改變狀態(tài)，而且會刷新界面，調(diào)用render函數(shù)
componentWillMount
相當(dāng)于OC中的 viewWillAppear 在組件即將顯示的時候會調(diào)用，只執(zhí)行一次
componentDidMount
刷新完了UI之后進(jìn)入 render方法調(diào)用之后 多用于網(wǎng)絡(luò)請求第一次 加載的數(shù)據(jù)
componentDidUpdate
狀態(tài)機state改變后 就進(jìn)入這個函數(shù) 更新UI后調(diào)用， 第一次加載UI的時候 不會進(jìn)入
輪播圖
輪播圖最主要的核心內(nèi)容就是：ScrollView和定時器
在RN中使用ScrollView需要導(dǎo)入ScrollView組件，只需要在import中添加就行了
定時器需要導(dǎo)入react-timer-mixin組件，這個就需要終端導(dǎo)入，首先要進(jìn)入目標(biāo)文件，然后用終端執(zhí)行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必須有一個確定的高度才能正常工作，因為它實際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個確定高度的容器（通過滾動操作）。要給一個ScrollView確定一個高度的話，要么直接給它設(shè)置高度（不建議），要么確定所有的父容器都有確定的高度。一般來說我們會給ScrollView設(shè)置flex: 1以使其自動填充父容器的空余空間，但前提條件是所有的父容器本身也設(shè)置了flex或者指定了高度，否則就會導(dǎo)致無法正常滾動，你可以使用元素查看器來查找問題的原因。
ScrollView內(nèi)部的其他響應(yīng)者尚無法阻止ScrollView本身成為響應(yīng)者。
簡易輪播圖
- 第一步：創(chuàng)建ScrollView，加載圖片
- 第二步：創(chuàng)建圓點區(qū)域
- 第三步：使用定時器
- 第四步：將scrollView和圓點聯(lián)系起來
/**
* 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}
//一幀動畫結(jié)束后
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加載完畢后調(diào)用定時器
componentDidMount() {
this.startTimer();
}
//開啟定時器的方法
startTimer(){
//1、拿到scrollView
var scrollView = this.refs.scrollView;
var imageCount = ImageData.data.length;
var obj = this;
//2、設(shè)置定時器
//開啟定時器
this.timer = setInterval(function () {//這里面this是window屬性
//2.1設(shè)置當(dāng)前頁
var currentPage = 0;
//2.2判斷
if ((obj.state.currentPage + 1) >= imageCount) {
//清零
currentPage =0;
} else {
currentPage = obj.state.currentPage + 1;
}
//2.3更新狀態(tài)機
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、更新狀態(tài)機
this.setState({
currentPage:currentPage
})
}
//返回小點點
renderPage(){
var style;
//定義一個裝點點的數(shù)組
var pageArr = [];
//拿到圖片數(shù)組
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]}
>
• </Text>
)
}
return pageArr;
}
renderAllImage(){
//數(shù)組
var allImage = [];
//拿到圖片數(shù)據(jù)
var imgsArr = ImageData.data;
//遍歷數(shù)組
for (var i=0;i<imgsArr.length;i++) {
//取出單個圖片的對象
var imageItem = imgsArr[i];
//創(chuàng)建圖片組件，到數(shù)組中
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'
}
});
代碼講解
在這里引入ScrollView，Image組件，AlertIOS組件是為了有提示，方便查錯
引入定時器，dataJson文件
Dimensions是用來獲取屏幕寬度的
注冊定時器；
給定時器加個固定間隔，單位是毫秒
狀態(tài)機（state）中記錄這當(dāng)前的currentPage第幾頁
創(chuàng)建ScrollView中有個
ref="scrollView"，這個是給scrollView加一個標(biāo)簽，根據(jù)標(biāo)簽獲取相應(yīng)的scrollView相當(dāng)于tag
//是否水平
horizontal={true}
//是否顯示垂直方向滾動條
showsVerticalScrollIndicator={false}
//是否顯示水平方向滾動條
showsHorizontalScrollIndicator={false}
//是否分頁
pagingEnabled={true}
renderAllImage()函數(shù)是用來創(chuàng)建scrollView中的圖片，返回一個圖片數(shù)組Image使用uri獲取的時候，必須要加寬高
renderPage()函數(shù)用來創(chuàng)建小圓點，其中
style = (i==this.state.currentPage)?{
color:'orange'}:{
color: '#ffffff'}
是用來判斷是否是選中的頁，來使圓點變色
綁定定時器，這里主要是 開啟定時器后，拿到scrollView的偏移量計算，
注意：在定時器中如果用this，這個是window屬性，所以使用var obj = this;難道當(dāng)前view的this
