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 ...
随机推荐
- WebMvcConfigurer 与 WebMvcConfigurationSupport避坑指南
我们知道,在Spring Boot 2.0后用自己的的配置类继承WebMvcConfigurerAdapter时,idea会提示这个类已经过时了. 通常情况下我们会采用下面两种代替方案: 实现WebM ...
- laravel 使用PhantomMagick导出pdf ,在Linux下安装字体
git项目地址:https://github.com/anam-hossain/phantommagick sudo apt-get -y install fontconfig xfonts-util ...
- .net 部署到服务端IIS,Process调用exe程序无法运行问题解决
场景: 开发某一功能将html内容转换为pdf,采用第三方插件wkhtmltopdf.exe进行转换.在本地调试正常运行,部署到服务端后文件没有正常生成. IIS中,Process打不开cmd程序,程 ...
- ftp搭建mysql服务器
一.将mysql放入FTP服务器中1.安装FTP yum install -y vsftpd2.准备ftp主目录 mkdir /var/ftp/mysql57/3.官网下载yum仓库的包. ...
- Canvas入门01-基础知识
定义一个canvas,直接在Html中使用canvas便签即可. <!DOCTYPE html> <html lang="en"> <head> ...
- mybatis中resultMap的使用
在mybatis中,使用<select>标签,必须要设置resultType属性 或 resultMap属性 否则会报错! resultType一般是返回简单类型的查询结果,涉及一张表 可 ...
- MyBatis框架 课程笔记
MyBatis框架 课程笔记 第1章 MyBatis简介 1.1 MyBatis历史 1)MyBatis是Apache的一个开源项目iBatis, 2010年6月这个项目由Apache Softw ...
- [BZOJ 4668]冷战(带边权并查集+启发式合并)
[BZOJ 4668]冷战(并查集+启发式合并) 题面 一开始有n个点,动态加边,同时查询u,v最早什么时候联通.强制在线 分析 用并查集维护连通性,每个点x还要另外记录tim[x],表示x什么时间与 ...
- 基于TCP和UDP的socket
为什么学习socket 你自己现在完全可以写一些小程序了,但是前面的学习和练习,我们写的代码都是在自己的电脑上运行的,虽然我们学过了模块引入,文件引入import等等,我可以在程序中获取到另一个文件的 ...
- 通过编写串口助手工具学习MFC过程--(十一)弹出模态型对话框
通过编写串口助手工具学习MFC过程 因为以前也做过几次MFC的编程,每次都是项目完成时,MFC基本操作清楚了,但是过好长时间不再接触MFC的项目,再次做MFC的项目时,又要从头开始熟悉.这次通过做一个 ...