生命周期
大家創(chuàng)建一個(gè)新項(xiàng)目的時(shí)候艺智，首先看到的就是 APP.js文件
這個(gè)內(nèi)容是用來(lái)引用頭文件的倘要，大家需要什么控件、功能就要引入相應(yīng)的文件十拣，比如：需要使用一個(gè)按鈕封拧，那么
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button
} from
這部分內(nèi)容是用來(lái)聲明一個(gè)類的，
//導(dǎo)出一個(gè)App類
export default class App extends Component
render()
這個(gè)函數(shù)是用來(lái)刷新UI夭问，它是個(gè)異步函數(shù)泽西，因此你可以同時(shí)刷新多個(gè)render函數(shù)
屬性
state={
title:'默認(rèn)值'
}
//屬性
static defaultProps={
age:18
}
Props屬性，相當(dāng)于OC中的readOnly缰趋，只讀屬性 嫁雞隨雞
state屬性捧杉，每一個(gè)組件有一個(gè)系統(tǒng)的setState方法，用來(lái)改變狀態(tài)秘血，而且會(huì)刷新界面味抖，調(diào)用render函數(shù)
componentWillMount
相當(dāng)于OC中的 viewWillAppear 在組件即將顯示的時(shí)候會(huì)調(diào)用，只執(zhí)行一次
componentDidMount
刷新完了UI之后進(jìn)入 render方法調(diào)用之后 多用于網(wǎng)絡(luò)請(qǐng)求第一次 加載的數(shù)據(jù)
componentDidUpdate
狀態(tài)機(jī)state改變后 就進(jìn)入這個(gè)函數(shù) 更新UI后調(diào)用灰粮， 第一次加載UI的時(shí)候 不會(huì)進(jìn)入
輪播圖
輪播圖最主要的核心內(nèi)容就是：ScrollView和定時(shí)器
在RN中使用ScrollView需要導(dǎo)入ScrollView組件仔涩，只需要在import中添加就行了
定時(shí)器需要導(dǎo)入react-timer-mixin組件，這個(gè)就需要終端導(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必須有一個(gè)確定的高度才能正常工作柑肴，因?yàn)樗鼘?shí)際上所做的就是將一系列不確定高度的子組件裝進(jìn)一個(gè)確定高度的容器（通過(guò)滾動(dòng)操作）霞揉。要給一個(gè)ScrollView確定一個(gè)高度的話，要么直接給它設(shè)置高度（不建議）嘉抒，要么確定所有的父容器都有確定的高度零聚。一般來(lái)說(shuō)我們會(huì)給ScrollView設(shè)置flex: 1以使其自動(dòng)填充父容器的空余空間，但前提條件是所有的父容器本身也設(shè)置了flex或者指定了高度些侍，否則就會(huì)導(dǎo)致無(wú)法正常滾動(dòng)隶症，你可以使用元素查看器來(lái)查找問(wèn)題的原因。
ScrollView內(nèi)部的其他響應(yīng)者尚無(wú)法阻止ScrollView本身成為響應(yīng)者岗宣。
簡(jiǎn)易輪播圖
- 第一步：創(chuàng)建ScrollView蚂会，加載圖片
- 第二步：創(chuàng)建圓點(diǎn)區(qū)域
- 第三步：使用定時(shí)器
- 第四步：將scrollView和圓點(diǎn)聯(lián)系起來(lái)
/**
* 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',
});
//引入定時(shí)器
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<{}> {
//注冊(cè)定時(shí)器
mixins: [TimerMixin]
state={
currentPage:0
}
//初始化固定值
static defaultProps={
//間隔時(shí)間 單位是毫秒
duration:1000
}
render() {
return (
<View style={styles.container}>
<ScrollView ref="scrollView"
horizontal={true}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
pagingEnabled={true}
//一幀動(dòng)畫(huà)結(jié)束后
onMomentumScrollEnd={(e)=>this.onScrollAnimationEnd(e)}
onScrollBeginDrag={()=>this.ScrollBeginDrag()}
onScrollEndDrag={()=>this.startTimer()}
>
{this.renderAllImage()}
</ScrollView>
{/*指示器*/}
<View style={styles.pageViewStyle}>
{/*5個(gè)小點(diǎn)*/}
{this.renderPage()}
</View>
</View>
);
}
ScrollBeginDrag(){
//拖拽操作
//清空定時(shí)器
clearInterval(this.timer);
}
//所有UI加載完畢后調(diào)用定時(shí)器
componentDidMount() {
this.startTimer();
}
//開(kāi)啟定時(shí)器的方法
startTimer(){
//1、拿到scrollView
var scrollView = this.refs.scrollView;
var imageCount = ImageData.data.length;
var obj = this;
//2耗式、設(shè)置定時(shí)器
//開(kāi)啟定時(shí)器
this.timer = setInterval(function () {//這里面this是window屬性
//2.1設(shè)置當(dāng)前頁(yè)
var currentPage = 0;
//2.2判斷
if ((obj.state.currentPage + 1) >= imageCount) {
//清零
currentPage =0;
} else {
currentPage = obj.state.currentPage + 1;
}
//2.3更新?tīng)顟B(tài)機(jī)
obj.setState({
currentPage:currentPage
})
//2.4滾動(dòng)起來(lái)
var offsetX = currentPage * width;
scrollView.scrollTo({x:offsetX,y:0,animation:true})
}, this.props.duration);
}
onScrollAnimationEnd(e){
//拿到偏移量
var offsetX = e.nativeEvent.contentOffset.x;
//2胁住、求出第幾頁(yè)
var currentPage = Math.floor(offsetX/width);
//2趁猴、更新?tīng)顟B(tài)機(jī)
this.setState({
currentPage:currentPage
})
}
//返回小點(diǎn)點(diǎn)
renderPage(){
var style;
//定義一個(gè)裝點(diǎn)點(diǎn)的數(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++) {
//取出單個(gè)圖片的對(duì)象
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',
//對(duì)齊方式
justifyContent:'flex-end',
//居中
alignItems:'center'
}
});
代碼講解
在這里引入ScrollView彪见，Image組件儡司，AlertIOS組件是為了有提示，方便查錯(cuò)
引入定時(shí)器余指，dataJson文件
Dimensions是用來(lái)獲取屏幕寬度的
注冊(cè)定時(shí)器酵镜；
給定時(shí)器加個(gè)固定間隔碉碉，單位是毫秒
狀態(tài)機(jī)（state）中記錄這當(dāng)前的currentPage第幾頁(yè)
創(chuàng)建ScrollView中有個(gè)
ref="scrollView"，這個(gè)是給scrollView加一個(gè)標(biāo)簽淮韭，根據(jù)標(biāo)簽獲取相應(yīng)的scrollView相當(dāng)于tag
//是否水平
horizontal={true}
//是否顯示垂直方向滾動(dòng)條
showsVerticalScrollIndicator={false}
//是否顯示水平方向滾動(dòng)條
showsHorizontalScrollIndicator={false}
//是否分頁(yè)
pagingEnabled={true}
renderAllImage()函數(shù)是用來(lái)創(chuàng)建scrollView中的圖片垢粮，返回一個(gè)圖片數(shù)組Image使用uri獲取的時(shí)候，必須要加寬高
renderPage()函數(shù)用來(lái)創(chuàng)建小圓點(diǎn)靠粪，其中
style = (i==this.state.currentPage)?{
color:'orange'}:{
color: '#ffffff'}
是用來(lái)判斷是否是選中的頁(yè)蜡吧，來(lái)使圓點(diǎn)變色
綁定定時(shí)器，這里主要是 開(kāi)啟定時(shí)器后占键，拿到scrollView的偏移量計(jì)算斩跌，
注意：在定時(shí)器中如果用this，這個(gè)是window屬性捞慌，所以使用var obj = this;難道當(dāng)前view的this
