最近研究RN，对于我这个新手网上资料坑的一笔啊！！！ES5的旧资料在ES6 上各种错误，今天做了个最简单的轮播图，记录一下。有问题的地方还请大神们赐教！
我现在学习用的是vscode + android studio + xcode 如果大家有好用的软件或者插件欢迎大家评论给我 ，RN小白不胜感激。
imgData.json
{
"data":[
{
"img":"img_01",
"title":"你那一笑倾城倾国"
},{
"img":"img_02",
"title":"那里记录了最唯美的爱情故事"
},{
"img":"img_03",
"title":"我怎么是一个剩女"
},{
"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 = {
//多少时间刷新一次
duration:5000
};
constructor(props){
super(props);
this.state = {
content:'',
//当前页码
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之后调用一次 实现复杂的操作
componentDidMount(){
//开启定时器
this.startTimer()
}
//开启定时器
startTimer(){
//2.添加定时器
this.timerInterval = setInterval(
()=>{
console.log('定时器开启')
this.timerScroll();
},this.props.duration);
}
//定时器滚动的处理
timerScroll(){
//0.拿到轮播视图scrollview
var scrollview = this.refs.scrollView;
var data = ImgData.data;
//1设置圆点
var activePage ;
//2判断
var currentPage = this.state.currentPage + 1
if (currentPage >= data.length){
activePage = 0
}else{
activePage = currentPage
}
//3更新状态机
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}
//结束拖拽
onScrollEndDrag = {this.onScrollEndDrag}
//当一帧滚动结束
onMomentumScrollEnd = {(e)=>this.onAnimationEnd(e)}
>
{this.renderAllImage()}
</ScrollView>
<View style={styles.pageViewStyle}>
{/* 返回五个圆点 */}
{this.renderPageCircle()}
</View>
{/* <Text>定时器示例：</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;
}
//返回圆点
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(){
//计时器停止
this.timerInterval && clearTimeout(this.timerInterval)
}
//结束拖拽
onScrollEndDrag(){
//计时器开启
this.startTimer()
}
//当一帧滚动结束的时候调用
onAnimationEnd(e){
// 获取滑动的偏移量
var offSetX = e.nativeEvent.contentOffset.x;
// 通过偏移量和屏幕宽度计算第几页
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,
//设置主轴的方向
flexDirection:'row',
//设置侧轴方向的对齐方式
alignItems:'center',
},
circleStyle:{
fontSize:25,
},
})
屏幕快照 2018-04-11 17.32.39.png
