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. Java面试宝典(2020版)

    一.Java 基础 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java ...

  2. 【1】【经典回溯、动态规划、贪心】【leetcode-55】跳跃游戏

    给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4]输出: true解释 ...

  3. 探索ASP.NET MVC5系列

    探索ASP.NET MVC5系列之~~~6.Session篇(进程外Session)     探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)     探索ASP.NET MV ...

  4. java中反射知识点总结

      1 package Demo; 2 3 import java.lang.reflect.Constructor; 4 import java.lang.reflect.Field; 5 impo ...

  5. laravel hash密码生成和密码验证

    在laravel中 登录表单中的密码是用hash来生成的. 在生成密码需要用到 laravel框架中的方法(都是laravel封装好了的) bcrypt($password)方法,直接将获取到的pas ...

  6. FileUpload上传多张照片

    <asp:FileUpload ID="uploaderInput" runat="server" multiple="multiple&quo ...

  7. 我的第一个netcore2.2 api项目搭建(一)

    早早就想入门netcore,一直没下定决心,这次正好碰上项目服务变更,便想着入坑试试,边学边用. 目标: 一.api使用core版的SqlSugar,集成orm,实现快速开发 二.api使用Swagg ...

  8. CodeForces 536D Tavas in Kansas

    洛谷题目页面传送门 & CodeForces题目页面传送门 A和B在一张无向连通图\(G=(V,E),|V|=n,|E|=m\)上玩一个游戏,节点\(i\)有一个权值\(v_i\).A.B分别 ...

  9. Python进阶----多表查询(内连,左连,右连), 子查询(in,带比较运算符)

    Python进阶----多表查询(内连,左连,右连), 子查询(in,带比较运算符) 一丶多表查询     多表连接查询的应用场景: ​         连接是关系数据库模型的主要特点,也是区别于其他 ...

  10. Windows中常用工具

    护眼软件 f.lux https://justgetflux.com/ Typora https://www.typora.io/ Markdown工具,小巧,方便. Snipaste https:/ ...