最近研究RN，對于我這個(gè)新手網(wǎng)上資料坑的一筆?。。。S5的舊資料在ES6 上各種錯(cuò)誤，今天做了個(gè)最簡單的輪播圖，記錄一下。有問題的地方還請大神們賜教！
我現(xiàn)在學(xué)習(xí)用的是vscode + android studio + xcode 如果大家有好用的軟件或者插件歡迎大家評論給我 ，RN小白不勝感激。
imgData.json
{
"data":[
{
"img":"img_01",
"title":"你那一笑傾城傾國"
},{
"img":"img_02",
"title":"那里記錄了最唯美的愛情故事"
},{
"img":"img_03",
"title":"我怎么是一個(gè)剩女"
},{
"img":"img_04",
"title":"生命中的最后四分鐘"
},{
"img":"img_05",
"title":"我們都需要治療"
}
]
}
App.js
import React, { Component } from 'react';
import { Text ,View,StyleSheet, ScrollView, Image ,Dimensions} from 'react-native';
import ImgData from './imgData.json';
var {width,height} = Dimensions.get('window')
export default class HelloWorldApp extends Component {
static defaultProps = {
//多少時(shí)間刷新一次
duration:5000
};
constructor(props){
super(props);
this.state = {
content:'',
//當(dāng)前頁碼
currentPage:0
}
this.onScrollBeginDrag = this.onScrollBeginDrag.bind(this);
this.onScrollEndDrag = this.onScrollEndDrag.bind(this);
this.onAnimationEnd = this.onAnimationEnd.bind(this);
this.timerScroll = this.timerScroll.bind(this);
}
//組件安裝 在render之后調(diào)用一次 實(shí)現(xiàn)復(fù)雜的操作
componentDidMount(){
//開啟定時(shí)器
this.startTimer()
}
//開啟定時(shí)器
startTimer(){
//2.添加定時(shí)器
this.timerInterval = setInterval(
()=>{
console.log('定時(shí)器開啟')
this.timerScroll();
},this.props.duration);
}
//定時(shí)器滾動的處理
timerScroll(){
//0.拿到輪播視圖scrollview
var scrollview = this.refs.scrollView;
var data = ImgData.data;
//1設(shè)置圓點(diǎn)
var activePage ;
//2判斷
var currentPage = this.state.currentPage + 1
if (currentPage >= data.length){
activePage = 0
}else{
activePage = currentPage
}
//3更新狀態(tài)機(jī)
this.setState({
currentPage:activePage,
content:data[activePage].title
})
//4.滾動滾動視圖
var currentX = activePage * width
scrollview.scrollTo({x: currentX,animated:true})
scrollview.scrollResponderScrollTo
}
//組件即將卸載
componentWillUnmount(){
this.timerInterval && clearTimeout(this.timerInterval)
}
render() {
return (
<View style = {styles.container}>
<ScrollView
ref = 'scrollView'
horizontal={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
//開始拖拽
onScrollBeginDrag = {this.onScrollBeginDrag}
//結(jié)束拖拽
onScrollEndDrag = {this.onScrollEndDrag}
//當(dāng)一幀滾動結(jié)束
onMomentumScrollEnd = {(e)=>this.onAnimationEnd(e)}
>
{this.renderAllImage()}
</ScrollView>
<View style={styles.pageViewStyle}>
{/* 返回五個(gè)圓點(diǎn) */}
{this.renderPageCircle()}
</View>
{/* <Text>定時(shí)器示例：</Text>
<Text>{this.state.content}</Text>
<Text>{this.state.msg}</Text> */}
</View>
);
}
//返回圖片
renderAllImage(){
var allImage = [];
var imgArr = ImgData.data;
for(var i = 0; i < imgArr.length; i++){
var imgItem = imgArr[i]
allImage.push(
<Image key = {i} source={{uri:imgItem.img}} style= {styles.imgStyle}/>
)
}
return allImage;
}
//返回圓點(diǎn)
renderPageCircle(){
var allCircle = [];
var imgArr = ImgData.data;
var tyle;
for(var i = 0; i < imgArr.length; i++){
//判斷
style = ( i== this.state.currentPage )? {color:'orange'} : {color:'white'}
var imgItem = imgArr[i]
allCircle.push(
<Text key = {i+100} style= {[styles.circleStyle,style]}>•</Text>
)
}
allCircle.push(
<Text>{this.state.content}</Text>
)
return allCircle;
}
//開始拖拽
onScrollBeginDrag(){
//計(jì)時(shí)器停止
this.timerInterval && clearTimeout(this.timerInterval)
}
//結(jié)束拖拽
onScrollEndDrag(){
//計(jì)時(shí)器開啟
this.startTimer()
}
//當(dāng)一幀滾動結(jié)束的時(shí)候調(diào)用
onAnimationEnd(e){
// 獲取滑動的偏移量
var offSetX = e.nativeEvent.contentOffset.x;
// 通過偏移量和屏幕寬度計(jì)算第幾頁
var currentPage = Math.floor(offSetX/width);
// 更新值已獲取屏幕更新
this.setState({
currentPage:currentPage,
content:ImgData.data[currentPage].title
})
}
}
const styles = StyleSheet.create({
container:{
marginTop:25,
},
imgStyle:{
width:width,
height:120,
},
pageViewStyle:{
width:width,
height:25,
backgroundColor:'rgba(241,241,241,0.9)',
//定位
position:'absolute',
bottom:0,
//設(shè)置主軸的方向
flexDirection:'row',
//設(shè)置側(cè)軸方向的對齊方式
alignItems:'center',
},
circleStyle:{
fontSize:25,
},
})
屏幕快照 2018-04-11 17.32.39.png
