react native ScrollView实现滑动锚定，滑动到指定位置

实现ScrollView滑动视图组件滑动到指定位置，实现tab与具体位置相锚定
给需要锚定的组件加上onLayout属性
//event.nativeEvent.layout.x是水平方向值，event.nativeEvent.layout.y是数值方向值
//this.layoutList用于存储组件位置

onLayout={(event) => {this.layoutList.push(event.nativeEvent.layout.y);}}

给ScrollView加上ref属性
//myScrollView需在class中声明

ref={(view) => {this.myScrollView = view;}}

onPress属性出添加函数实现点击后滑动到锚点处
//clickToScroll函数处理用户点击某tab后ScrollView自动滑动到某个锚定位置

public clickToScroll = (index: number) => {this.myScrollView.scrollTo({ x: 0, y: this.layoutList[index], animated: true });};

react native ScrollView实现滑动锚定，滑动到指定位置相关推荐

react native ScrollView
ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的.ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置). ...
【REACT NATIVE 系列教程之六】重写SHOULDCOMPONENTUPDATE指定组件是否进行重绘
前几天,Himi 写练手项目时,遇到子更新父state中的某一个属性值,且对父进行重绘时,父包含的所有子组件都进行重绘 – -- 非常尴尬. 查阅了RN文档,终于在生命周期篇看到了想要的答案. 仔细看 ...
react native scrollView FlatList 多级联动
思路就是监听 onscroll方法改变其他联动控件,下面是一个例子 import React, {Component} from 'react'; import {StyleSheet,Text, ...
为什么 React Native 连遭 Airbnb、Udacity 抛弃？
投稿 | 亦枫责编 | 唐小引 Udacity 移动端团队最近删除了 App 中使用 React Native 语言开发的相关功能. 我们收到大量有关我们用法或 React Native 的问题以及 ...
native8081端口 react_教你轻松修改React Native的端口(如何同时运行多个React Native、8081端口占用问题)...
当我们运行一个React Native项目的时候,React Native会启动一个默认端口号为8081的本地服务,该8081的服务就是React Native项目的一个本地服务器,用于提供JSBun ...
react native滑动输入高级版（刻度尺）
该版本依旧存在性能问题但相比上版本有点改善,凑合着用把ScrollView改成recyclerlistview组件没有性能问题,详情看react native高性能组件recyclerlistvi ...
React Native学习（七）—— FlatList实现横向滑动列表效果
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
Android之解决在scrollview中嵌套ListView切换界面时scrollview整体向下滑动
有时候我们在scrollview中会嵌套ListView,在嵌套ListView(ListView上面还有一些控件)后,切换Activity时会发现整个 scrollview 被向下滑动直到ListV ...
Android之解决ScrollView嵌套RecycleView导致滑动冲突或者显示不全的问题
1 问题 ScrollView嵌套RecycleView导致滑动冲突或者显示不全的问题 2 解决办法 1).ScrollView替换成普通布局,然后RecycleView用的BaseMultiItem ...

react native ScrollView实现滑动锚定，滑动到指定位置

react native ScrollView实现滑动锚定，滑动到指定位置相关推荐

最新文章

热门文章