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. PHP7.3.0+弃用FILTER_FLAG_SCHEME_REQUIRED的解决办法

    今天本地调用一个接口报错了: filter_var(): explicit use of FILTER_FLAG_SCHEME_REQUIRED and FILTER_FLAG_HOST_REQUIR ...

  2. 在linux上安装elasticsearch简称ES 简单介绍安装步骤

    1.简介 Elasticsearch 是一个分布式可扩展的实时搜索和分析引擎,一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎.当然 Elasticsearch 并不仅仅是 ...

  3. typescript nodejs 依赖注入实现

    依赖注入通常也是我们所说的ioc模式,今天分享的是用typescript语言实现的ioc模式,这边用到的主要组件是 reflect-metadata 这个组件可以获取或者设置元数据信息,它的作用是拿到 ...

  4. VUE组件2数据传递

    传递数据 prop验证 除了传递数组,也可以传递对象 Vue.component('test',{ props:{ price:Number, unit: String } }) 如果price不是数 ...

  5. 一次 Young GC 的优化实践(FinalReference 相关)

    本文转载自公众号:涤生的博客,阅读时间大约需要11分钟.涤生的文章看起来跟破案一样,很精彩,很有启发. 前言 博客已经好久没有更新了,主要原因是 18 年下半年工作比较忙,另外也没有比较有意思的题材, ...

  6. Linux基础:时间同步工具Chrony

    在Linux下,默认情况下,系统时间和硬件时间,并不会自动同步.在Linux运行过程中,系统时间和硬件时间以异步的方式运行,互不干扰.硬件时间的运行,是靠Bios电池来维持,而系统时间,是用CPU t ...

  7. pandas 之 特征工程

    import numpy as np import pandas as pd So far(到目前为止) in this chapter we've been concerned with rearr ...

  8. The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone 。

    The server time zone value '�й���׼ʱ��' is unrecognized or represents more than one time zone. 今天有Mys ...

  9. 分享一篇最近新写的jquery注册页面表单校验的程序,仅供参考

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. linux系统IO操作

    本文重点说明下面内容: 什么是标准IO,什么是文件IO? 什么是Direct IO? O_SYNC标识有什么意义? 各个层面的缓存如何同步? 还在page cache中的脏页可以读写吗? IO路径上的 ...