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 滚动跳转到指定位置的更多相关文章

  1. [RN] React Native FlatList跳转到顶部/底部

    React Native FlatList跳转到顶部/底部 核心代码如下: <ScrollView showsVerticalScrollIndicator={false} contentCon ...

  2. [RN] React Native 幻灯片效果 Banner

    [RN] React Native 幻灯片效果 Banner 1.定义Banner import React, {Component} from 'react'; import {Image, Scr ...

  3. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

  4. [RN] React Native 实现图片预览

    [RN] React Native 实现图片预览 效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...

  5. [RN] React Native 常见基本问题归纳总结

    [RN] React Native  常见基本问题归纳总结 本问题总结涉及到版本为: "react": "16.8.3","react-native& ...

  6. [RN] React Native 关闭所有黄色警告

    [RN] React Native 关闭所有黄色警告 console.ignoredYellowBox = ['Warning: BackAndroid is deprecated. Please u ...

  7. [RN] React Native 下实现底部标签(支持滑动切换)

    上一篇文章 [RN] React Native 下实现底部标签(不支持滑动切换) 总结了不支持滑动切换的方法,此篇文章总结出 支持滑动 的方法 准备工作之类的,跟上文类似,大家可点击上文查看相关内容. ...

  8. [RN] React Native 实现 类似QQ 登陆页面

    [RN] React Native 实现 类似QQ 登陆页面 一.主页index.js 项目目录下index.js /** * @format */ import {AppRegistry} from ...

  9. RecyclerView跳转到指定位置的三种方式

    自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView的出现目的是为了替代listview和ScrollVie ...

随机推荐

  1. 示例:WPF实现ApplicationCommands.Delete的TextBox

    原文:示例:WPF实现ApplicationCommands.Delete的TextBox 目的:通过模仿TextBox中Ctrl+C等快捷键原理来了解CommandBindings实现原理,可以通过 ...

  2. python爬虫---scrapy框架爬取图片,scrapy手动发送请求,发送post请求,提升爬取效率,请求传参(meta),五大核心组件,中间件

    # settings 配置 UA USER_AGENT = 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, l ...

  3. 物联网学习笔记三:物联网网关协议比较:MQTT 和 Modbus

    物联网学习笔记三:物联网网关协议比较:MQTT 和 Modbus 物联网 (IoT) 不只是新技术,还是与旧技术的集成,其关键在于通信.可用的通信方法各不相同,但是,各种不同的协议在将海量“事物”连接 ...

  4. 嵌入式Web服务器boa在ARM平台的移植步骤

    1.下载http://www.boa.org/ 2.解压tar xzf boa-0.94.13.tar.gz 3.编译cd boa-0.94.13/src./configure 生成了makefile ...

  5. Django:RestFramework之-------分页

    9.分页操作 分页,看第n页,每页显示n条数据 分页,在n个位置,向后查看n条数据. 加密分页,上一页和下一页 1.基于PageNumberPagination分页 1.路由: url(r'^(?P& ...

  6. 1. vue.js介绍

    1. 什么是vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助 ...

  7. MYSQL中的时间类型

    时间上总共有五中表示方法:它们分别是 time.date.datetime.timestamp和year. time :  “hh:mm:ss”格式表示的时间值,格式显示TIME值,但允许使用字符串或 ...

  8. 小程序开发 解析内容中unicode转中文编码显示问题

    如果对你有帮助的话麻烦点个[推荐]~最好还可以follow一下我的GitHub~感谢观看! 小程序后台返回数据的时候,html内容是经过unicode编码的不能直接显示,里边全是类似&#xxx ...

  9. 快速了解MongoDB

    简介 MongoDB是一款为广泛的现代应用程序设计的高性能.可扩展.分布式数据库系统.MongoDB可用于不同规模大小的组织,为那些对系统低延迟.高吞吐量以及可持续性有很高要求的应用提供稳定关键的服务 ...

  10. url请求时,参数中的+在服务器接收时为空格,导致AES加密报出javax.crypto.IllegalBlockSizeException: Input length must be multiple of 16 when decrypting with padded cipher

    报错的意思的是使用该种解密方式出入长度应为16bit的倍数,但实际的错误却不是这个,错误原因根本上是因为在http请求是特殊字符编码错误,具体就是base64生成的+号,服务器接收时成了空格,然后导致 ...