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. Git系列 —— github提交一个空目录

    转载自github提交一个空目录 github默认不上传空目录,有的时候需要空目录来保持程序的结构. 两种场景 1.始终保持空目录,即时里面有文件,也全部忽略掉. 建立一个.gitignore文件放到 ...

  2. golang学习笔记--函数和方法

    在go中,函数类型是一等类型,这意味着可以吧函数当做一个值来传递和使用. func divide(dividend int,divisor int)(int,error){ //省略部分代码 } 参数 ...

  3. NETCore执行Shell修改Centos系统IP信息

    原文:NETCore执行Shell修改Centos系统IP信息 目录 shell代码 NETCore执行Shell文件 注意事项 shell代码 首先通过find命令找到/etc/sysconfig/ ...

  4. Angular复习笔记7-路由(下)

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

  5. rem适配移动端

    一.屏幕宽度 / 设计稿宽度 *100 来设置根元素的 font-size   10px = 0.10rem (function (doc, win) { var docEl = doc.docume ...

  6. php curl 转为 x-www-form-urlencoded 方式的坑

    网上转变的方法基本都是写添加下面这句: curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-fo ...

  7. 微服务spring-cloud 学习第一天

    了解微服务     微服务架构风格是一种将单一应用程序开发为一组小型服务的方法,每个服务运行在自己的进程中,服务间通信采用轻量级通信机制(通常使用HTTP).这些服务围绕业务能力构建并且可通过自动部署 ...

  8. Win10下免安装版JDK8环境变量配置

    1.解压JDK 2.配置JAVA_HOME环境变量 D:\Free\jdk1.8.0_92 3.配置CLASSPATH环境变量 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\to ...

  9. FFMPEG 命令行工具- ffplay

    ffplay 简介 ffplay是ffmpeg工程中提供的播放器,功能相当的强大,凡是ffmpeg支持的视音频格式它基本上都支持.甚至连VLC不支持的一些流媒体都可以播放,但是它的缺点是其不是图形化界 ...

  10. Linux errno 与 Python

    以下均为Linux环境测试. 起因: 开发的一个程序,经常会由于内存不足而被kill掉,使用的是os.system函数执行的,返回值总是35072,当时没多想.后来由于一些原因,要模拟OOM 被kil ...