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. 封装:Windows系统文件图标

    原文:封装:Windows系统文件图标 用途:用于获取文件系统默认图标 using System; using System.Collections.Generic; using System.Dra ...

  2. 使用php函数防止SQL注入方法

    什么是SQL注入? SQL注入是指在你系统防御之外,某人将一段Mysql语句注入到你的数据库.注入通常发生在系统要求用户输入数据的时候,比如用户名的输入,用户可能输入的不是一个用户名,而是一段SQL语 ...

  3. spring接口文档注解:@ApiOperation

    @ApiOperation不是spring自带的注解是swagger里的 com.wordnik.swagger.annotations.ApiOperation; @ApiOperation和@Ap ...

  4. IIS 图片 JS CSS 500错误

    1.检查站点MIME类型是否可以正常加载

  5. <!DOCTYPE html> 详解

    前段时间的.netcore web应用程序的项目里面使用Frameset与Frame时候出现了一个问题就是使用不了,今晚准备测试一个bug却得到意外收获o(∩_∩)o 哈哈, 找到了最终原因funny ...

  6. mybatis映射mapper文件做like模糊查询

    方法:使用concat函数连接通配符

  7. ASP.NET Core 静态文件

    静态文件(HTML,CSS,图片和Javascript之类的资源)会被ASP.NET Core应用直接提供给客户端. 静态文件通常位于网站根目录(web root) <content-root& ...

  8. jsp,servlet文件上传问题完善

    1. 上传文件时文件名中文乱码 upload.setHeaderEncoding("utf-8"); 有个疑惑: 不管设置不设置都不乱码,但是刘帅龙老师讲的时候出现了乱码 . 2. ...

  9. [Linux] TMUX Python版本设置

    TMUX Python版本设置 本地mac的终端已经设置python版本为python3.7, 结果进入tmux时,一直时python2.7. # 本地.bash_profile alias pyth ...

  10. IDEA忽略编译报错

    设置Intellij IDEA忽略部分类编译错误 File——Settings——Compiler——Java compiler修改:Use complier:将Javac改为Eclipse在Ecli ...