React Native 之ScrollView
import React, { Component } from 'react'
import { Text, StyleSheet, View, Button ,TouchableOpacity,Alert,ScrollView,Image} from 'react-native'
import { createStackNavigator, createAppContainer } from 'react-navigation'; let Dimensions = require('Dimensions');
let {width, height} = Dimensions.get('window'); export default class HomeScreen extends Component {
static navigationOptions = {
title: 'HomeScreen'
} //defaultProps
static defaultProps = {
//每隔多少秒执行一次
duration:2000
} componentDidMount(){
// 开启定时器
this.startTime();
} // 开启定时器
startTime(){
// 1.拿到scrollerView
let scrollerView = this.refs.scrollerView;
let imageCount = 4;
// 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;
scrollerView.scrollTo({x: offsetX, y:0, animated:true});
}, this.props.duration);
} constructor(props){
super(props);
this.state = {
currentPage:0
}
this.renderPageIndex = this.renderPageIndex.bind(this);
} renderChildView(){
var allChild = [];
var imgNames = [require('./img/leading_01.png'),
require('./img/leading_02.png'),
require('./img/leading_03.png'),
require('./img/leading_04.png')];
imgNames.forEach((item,index)=>{ allChild.push(
<Image
style={{width: 375,height: 375}}
source={item}
/>
)
})
return allChild;
} // 返回页面指示器的圆点
renderPageIndex(){
// 数组
let indicatorArr = [];
//拿到图形数组
//let imageArrs = ImageData.data;
//样式
var style;
//遍历
for (var i = 0; i < 4; i++){
// 判断
style = (i==this.state.currentPage) ? {color: 'orange'} : {color: '#E8E8E8'} //放入圆点
indicatorArr.push(
// 多个样式使用[]数组来放
<Text key={i} style={[{fontSize:25}, style]}>•</Text>
);
}
//返回
return indicatorArr;
} // 当一帧滚动结束的时候调用
onAnimationEnd(e){
// 1.求出水平方向的偏移量
var offsetX = e.nativeEvent.contentOffset.x; // 2.求出当前的页数 floor函数 取整
var currentPage = Math.floor(offsetX / width); // 3.更新状态机
this.setState({
// 当前页
currentPage: currentPage
}) } // 开始拖拽时调用
onScrollerBeginDrag(){
// 停止定时器
clearInterval(this.timer);
}
// 停止拖拽时调用
onScrollEndDrag(){
// 开启定时器
this.startTime();
} render(){
return(
<View style={styles.circulateViewStyle}>
<ScrollView
ref="scrollerView"
horizontal={true}
pagingEnabled={true}
scrollEnabled={true}
//滚动动画结束时调用此函数
onMomentumScrollEnd={(e)=>this.onAnimationEnd(e)}
//开始拖拽
onScrollBeginDrag={(e)=>this.onScrollerBeginDrag(e)}
//停止拖拽
onScrollEndDrag={(e)=>this.onScrollEndDrag(e)}
> {this.renderChildView()}
</ScrollView>
{/*底部页面指示器*/}
<View style={styles.pageViewStyle}>
{/*返回5个圆点*/}
{this.renderPageIndex()}
</View> </View> );
} const styles = StyleSheet.create({ circulateViewStyle: { marginTop:20,
height:150,
width:width,
},
scrollViewStyle:{ }, imageStyle: {
width: width,
height: 150
},
pageViewStyle: {
width:width,
height:25,
backgroundColor:'rgba(0, 0, 0, 0.4)',
position:'absolute',
bottom:0,
flexDirection:'row',
alignItems:'center'
}
});
React Native 之ScrollView的更多相关文章
- React Native之 ScrollView介绍和使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native之ScrollView控件详解
概述 ScrollView在Android和ios原生开发中都比较常见,是一个 滚动视图控件.在RN开发中,系统也给我们提供了这么一个控件.不过在RN开发中 ,使用ScrollView必须有一个确定的 ...
- react native ScrollView
ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的.ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置). ...
- React Native组件之ScrollView 和 StatusBar和TabBarIos
React Native中的组件ScrollView类似于iOS中的UIScrollView,其基本的使用方法和熟悉如下: /** * Sample React Native App * https: ...
- [React Native] Create a component using ScrollView
To show a list of unchanging data in React Native you can use the scroll view component. In this les ...
- React Native常用组件之ScrollView
1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...
- React Native常用组件之ScrollView组件
一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们 ...
- [RN] React Native ScrollView去掉自带的间隔
React Native ScrollView去掉自带的间隔 使用ScrollView时,自带了一个类似marginTop的效果,将其去掉 <ScrollView automaticallyAd ...
- [RN] React Native 中使用 stickyHeaderIndices 实现 ScrollView 的吸顶效果
React Native中,ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果. 例如下面代码中: <ScrollView showsVert ...
随机推荐
- 【C语言工具】AddressSanitizer - 内存检测工具
Github 地址:https://github.com/google/sanitizers Wiki 地址:https://github.com/google/sanitizers/wiki/Add ...
- Java ——接口
本节重点思维导图 定义: public interface Traffic { public static final int sits = 4; public abstract void run() ...
- vim加脚本注释和文本加密
vim /etc/vimrc 一.李导版本 autocmd BufNewFile *.py,*.cc,*.sh,*.java exec ":call SetTitle()" fun ...
- kafka之config/server.properties配置参数说明
broker.id--服务器编号 host.name--推荐写本机ip advertised.host.name--外网访问ip advertised.port--外网访问端口 num.partiti ...
- Nginx工作机制
Nginx分为单工作进程和多工作进程两种模式.通常采用1个master+多个worker进程配合异步非阻塞的工作机制.master进程主要负责管理自身和下属的worker进程,worker负责处理请求 ...
- CF和OF的区别
进位标志CF和溢出标志OF的区别: 有符号数和无符号数只是认为的进行区分,计算机从来不区分有符号数和无符号数.对于运算的数来说,只要符合进位的情况,CF就置1.只要符合溢出的情况,OF就置1.但是后续 ...
- chromium for android GPU进程结构分析
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/jaylinzhou/article/details/27517471 GPU进程的client(Br ...
- 【FAQ】P3. 为什么 torch.cuda.is_available() 是 False
为什么 torch.cuda.is_available() 是 False torch.cuda.is_available(),这个指令的作用是看,你电脑的 GPU 能否被 PyTorch 调用. 如 ...
- 网络爬虫之HTTPClient
HTTPClient官网:http://hc.apache.org/httpcomponents-client-4.5.x/quickstart.html 问题一:明明浏览器请求有数据,可使用HTTP ...
- luogu P1224 [NOI2013]向量内积
传送门 挺有意思的一道题 暴力60就是枚举每个向量暴力check,随机选向量就能多骗一些分 然后两个向量内积要模\(k\)为\(0\),那么如果全部不为\(0\)就不合法.先考虑\(k=2\),对于向 ...