[RN] React Native 滚动跳转到指定位置
React Native 滚动跳转到指定位置
一、结构
<ScrollView horizontal={true} ref={(view) => { this.myScrollView = view; }}>
<View></View>
...
<ScrollView>
二、实现方法
1)先给View增加一个onLayout属性
<View onLayout={event=>{this.layoutX = event.nativeEvent.layout.x}}>
2)然后通过下面这样就可以实现滚动到指定位置:
this.myScrollView.scrollTo({ x: this.layoutX, y: , animated: true});
注意:以上代码是水平方向的跳转,垂直方向 做对应的 改变即可!
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10962020.html
转载请著名出处!谢谢~~
[RN] React Native 滚动跳转到指定位置的更多相关文章
- [RN] React Native FlatList跳转到顶部/底部
React Native FlatList跳转到顶部/底部 核心代码如下: <ScrollView showsVerticalScrollIndicator={false} contentCon ...
- [RN] React Native 幻灯片效果 Banner
[RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...
- [RN] React Native 常用命令行
[RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...
- [RN] React Native 实现图片预览
[RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
- [RN] React Native 常见基本问题归纳总结
[RN] React Native 常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...
- [RN] React Native 关闭所有黄色警告
[RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...
- [RN] React Native 下实现底部标签(支持滑动切换)
上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...
- [RN] React Native 实现 类似QQ 登陆页面
[RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...
- RecyclerView跳转到指定位置的三种方式
自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView的出现目的是为了替代listview和ScrollVie ...
随机推荐
- Redis高级功能-1、高并发基本概述
1.可能的问题 要将redis运用到工程项目中,只使用一台redis是万万不能的,原因如下: (1)从结构上,单个redis服务器会发生单点故障,并且一台服务器需要处理所有的请求负载,压力较大. (2 ...
- 树莓派4B安装Raspbian系统及配置
2019/11/11, 树莓派4B, Raspbian Buster 摘要:给树莓派4B安装系统及基础配置 树莓派实验室参考文档 准备工具 树莓派4B硬件 SD卡格式化工具 SD Formatter ...
- C# 手写将对象转换为Json方法
一.需求场景 (1)不能用JavaScriptSerializer.DataContractJsonSerializer.Newtonsoft.Json这些写好的方法,需要自己写方法. (2)转化的类 ...
- Java自学-数字与字符串 数学方法
Java Math类常用方法 java.lang.Math提供了一些常用的数学运算方法,并且都是以静态方法的形式存在 步骤 1 : 四舍五入, 随机数,开方,次方,π,自然常数 package dig ...
- Vue--基础1
目录 Vue MVVM模式 Hello World示例 挂载点 插值表达式与过滤器 Vue指令 文本指令 属性指令 事件指令 表单指令 条件指令 pre指令 循环指令 案例 Vue Vue是一个轻量级 ...
- 如何将一个div盒子水平垂直都居中?
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- Linux系统MySQL的常用操作命令
安装好MySQL服务后添加环境变量: #vi /etc/profile export MYSQL_HOME=/usr/local/mysql export PATH=$PATH:$MYSQL_HOME ...
- AF step、Bokeh等说明
基本概念:FV: Focus Value, 用来衡量图像AF的清晰度. DOF: Deep Of Field, 景深,表示物距清晰的范围,景深越长表示物距前后清晰的范围越大. AF step一般来说, ...
- React 之 Redux 的使用
Redux可以简单概况为:将需要修改的state都存入到store里,发起一个action用来描述发生了什么,用reducers描述action如何改变state tree .创建store的时候需要 ...
- java操作excel-----poi
一.所需依赖包 1.使用maven会自动导入相关依赖,所以只需要导入2007版的的包,其他包自动导入,包括2003所需jar包. <dependency> <groupId>o ...