//React native 0.57
一.<Image source={{uri: 'mipmap/img_1'}}
这种方式加载图片时，用flex:1无效
必须指定宽高才有效。
二 图片填不满scrollview布局
1.图片大小要合适，
2.增加resizemode属性
3.在滚动的时候把width适当增加一些（+8）
4. （虚拟机上测试无效） layout_height="match_parent"
fillViewport="true"
代码如下：
import React, { Component } from'react';
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
} from'react-native';
//引入数据
let ImageData = require('./Resource/imgData.json');
let Dimensions = require('Dimensions');
let {width, height} = Dimensions.get('window');
exportdefault class viewdemo extends Component {
// 常量
// props
//
// ES6中需要用在constructor中有super(props)来传递props。
// ES6中getDefaultProps是class的属性而不是方法，不能定义在组件内部，需要单独写在外面。
// 同理，ES6中propTypes也需要写在外面。
//defaultProps
static defaultProps = {
//每隔多少秒执行一次
duration:2000
}
//设置可变值和初始值
// getInitialState(){ //ES5模式
// return {
// // 当前页
// currentPage: 0
// }
// }
constructor(props) {// 构造函数
super(props);
//ES6模式
this.state = {
currentPage:0
};
}
// 开始拖拽时调用
onScrollerBeginDrag(){
// 停止定时器
clearInterval(this.timer);
}
// 停止拖拽时调用
onScrollEndDrag(){
// 开启定时器
this.startTime();
}
// 复杂操作
componentDidMount() {
// debugger
// 开启定时器
this.startTime();
}
// 开启定时器
startTime(){
// 1.拿到scrollerView
let scrollerView =this.refs.scrollerView;
let imageCount = ImageData.data.length;
// 2.添加定时器
// 2.1 设置圆点
let activePage =0;
this.timer = setInterval(() => {
// 2.2 判断
if((this.state.currentPage+1) >= imageCount){
activePage =0;
}else {
activePage =this.state.currentPage+1;
}
// 2.3 更新状态机
this.setState({
// 当前页
currentPage: activePage
})
// 2.4 让scrollerVeiw滚动起来
let offsetX = activePage * (width+8);
scrollerView.scrollTo({x: offsetX, y:0, animated:true});
},this.props.duration);
}
render(){
return(
style={styles.circulateViewStyle}
// 水平滚动
horizontal={true}
// 是否显示水平滚动条
showsHorizontalScrollIndicator={false}
// 安页滚动
pagingEnabled={true}
//滚动动画结束时调用此函数
onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
//开始拖拽
onScrollBeginDrag={(e)=>this.onScrollerBeginDrag(e)}
//停止拖拽
onScrollEndDrag={(e)=>this.onScrollEndDrag(e)}
>
{this.creatImages()}
{/*底部页面指示器*/}
{/*返回5个圆点*/}
{this.renderPageIndex()}
);
}
//返回所有的图片
creatImages(){
//数组
let allImage = [];
//拿到图形数组
let imageArrs = ImageData.data;
//遍历
for (var i =0; i < imageArrs.length; i++){
//取出每一个单独的对象
var imageItem = imageArrs[i];
//创建组件放入数组
allImage.push(
);
}
// 返回数组
return allImage;
}
// 返回页面指示器的圆点
renderPageIndex(){
// 数组
let indicatorArr = [];
//拿到图形数组
let imageArrs = ImageData.data;
//样式
var style;
//遍历
for (var i =0; i < imageArrs.length; i++){
// 判断
style = (i==this.state.currentPage) ? {color:'orange'} : {color:'#E8E8E8'}
//放入圆点
indicatorArr.push(
// 多个样式使用[]数组来放
•
);
}
//返回
return indicatorArr;
}
// 当一帧滚动结束的时候调用
onAnimationEnd(e){
// 1.求出水平方向的偏移量
var offsetX = e.nativeEvent.contentOffset.x;
// 2.求出当前的页数 floor函数 取整
var currentPage = Math.floor(offsetX / width);
// 3.更新状态机
this.setState({
// 当前页
currentPage: currentPage
})
}
}
const styles = StyleSheet.create({
circulateViewStyle: {
backgroundColor:"#ff3304",
// marginTop:20,
height:height,
width:width,
},
scrollViewStyle:{
},
imageStyle: {
width:width+8,
height:height,
// flex:1,
flexDirection:'row',
justifyContent:'space-around',
alignItems:'stretch',
// resizeMode:'contain'
},
pageViewStyle: {
flex:1,
// width:width,
// height:25,
backgroundColor:'rgba(0, 0, 0, 0.4)',
position:'absolute',
bottom:0,
flexDirection:'row',
alignItems:'center'
}
});
#####精彩稍后继续,尽请点赞打赏.
网友评论