首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在使用条件渲染时,有没有办法确定ScrollView在react-native中的位置?

在React Native中,可以使用onLayout属性来确定ScrollView的位置。onLayout是一个回调函数,当组件布局发生变化时会被调用。通过在ScrollView上设置onLayout属性,可以获取到ScrollView的位置信息。

以下是一个示例代码:

代码语言:txt
复制
import React, { useState } from 'react';
import { ScrollView, View } from 'react-native';

const App = () => {
  const [scrollViewPosition, setScrollViewPosition] = useState({ x: 0, y: 0 });

  const handleScrollViewLayout = (event) => {
    const { x, y } = event.nativeEvent.layout;
    setScrollViewPosition({ x, y });
  };

  return (
    <View style={{ flex: 1 }}>
      <ScrollView onLayout={handleScrollViewLayout}>
        {/* ScrollView content */}
      </ScrollView>
      <View style={{ position: 'absolute', top: scrollViewPosition.y, left: scrollViewPosition.x }}>
        {/* Position indicator */}
      </View>
    </View>
  );
};

export default App;

在上面的代码中,我们使用useState来创建一个名为scrollViewPosition的状态变量,用于保存ScrollView的位置信息。当ScrollView的布局发生变化时,handleScrollViewLayout函数会被调用,通过event.nativeEvent.layout获取到ScrollView的位置信息,并更新scrollViewPosition的值。

然后,我们在ScrollView下方添加了一个绝对定位的View组件,通过设置topleft样式属性,将其定位到ScrollView的位置上。这样就可以实现一个位置指示器,用于显示ScrollView的位置。

请注意,上述代码中没有提及任何特定的云计算品牌商或产品。如果需要使用腾讯云相关产品来实现ScrollView的位置确定,可以根据具体需求选择适合的云服务,例如云函数、云存储等,并在代码中调用相应的腾讯云产品API来实现相关功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AndroidFixScrollView自定义控件

,子tab页面中有ListView(React-native原生实现也是ScrollView),现在外部ScrollView设定一个固定高度(屏幕高度+视频高度一半),接下来解决难点是要使用原生父...ViewGroup是否拦截事件,是通过onTnterceptTouchEvent返回值来确定,当返回true,表示拦截该事件,那么该系列事件全部传递给ViewGrouponTouchEvent,如果返回...) up--手指抬起事件 3如何在ViewGroup寻找子控件 使用递归+instanceof可以父ScrollView找到一组类型相同控件,想找某一个tab子页面某一个ListView,太坑了!...所在屏幕位置发生变化通过x值可以区分也就是要坐标系横坐标,判断当前view“屏幕可见”一定是0<x<screenwidth(屏幕宽度),后面直接想用输出打印View位置坐标,发现各种相似的方法,...) { //获取view整个屏幕坐标如果x==0的话代表这个scrollview是正在显示 int[] location

1.8K80

React-native踩坑小记

tab切换最外层,每一个tab页签对应一个listview,同时listview还嵌套了一个轮播图swiper 开发过程遇到了如下几个问题(android环境下): swiper插件无法显示;...swiper插件无法显示: 因为android下,scrollview与listview组件嵌套后会导致scrollview内容无法被渲染,所以无法显示。...所以我们将swiper挪到了listviewheader。(因为header被下拉刷新组件所使用,所以我们重写了插件部分代码,将swiper塞了进去) 2....React-native,View组件有如下几个常用事件: 争权几个事件(通过返回值来确定这次操作应该由谁来响应) onStartShouldSetResponder onMoveShouldSetResponder...Touch* 组件有两个事件是这里我们需要用到:onPressIn和onPressOut 这两个事件会在手指按下和抬起触发; 所以我们需要做就是在这两个事件触发锁定和解锁外层scrollview

4.4K80

React-Native爬出,我记下了这些

正文 1.对于背景,可以使用组件 2.字符串不写在组件里面会报错,比如写在View组件下面的话 3.Web溢出时候有内部滚动条div,RN则是对应使用...ScrollView组件 4.Web我们使用click处理点击事件,RN要用Touchable组件onPress事件 5.对于导航,我们可以使用React-Navigation。...不用再畏手畏脚了,因为这里是移动端 9.如果要获取某个组件屏幕位置组,可以利用组件布局完毕触发onLayout方法,可以在这里获取组件位置,但令人遗憾是,这个方法是异步,异步特征可能会与你需求冲突...,如果每个组件物理距离是确定,而非灵活变化的话,是可以写死 。...12.除了动画和最近新增CSS特性外,我们原本web能用CSS属性大部分还是能用

2.3K30

react native 自定义下拉刷新——桥接MJRefresh

0、React Native 下拉刷新、上拉更多一直是一个很让人头疼问题,RNAPI只能使用默认UIRefreshControl,定制和体验上都很差,下面我通过修改系统组件方法桥接一个原生中常用三方库...https://github.com/XHTeng/react-native-gifted-listview 注意:该方法缺点是每次更新react-native 组件都需要重新修改添加一次,还没有找到好办法能够保存修改...RCTEventDispatcher 3、RCTScrollView.m RCTScrollView添加以下代码,同样注意添加位置,可以在这里修改为你需要下拉样式 ?...增加如下代码,方便ScrollView.js调用 RCT_EXPORT_VIEW_PROPERTY(onRefreshData, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY.../node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js),桥接上面添加属性、方法对应props和函数 增加props

2.1K80

基础篇章:关于 React Native 之 ListView 组件讲解

我们来看看它怎么使用吧。 大家好,我是ListView,我是React Native大家族基础组件,一个核心组件。...,我当然还支持一些高级特性,比如:给每组数组加一个粘节标题,也就是类似于通讯录其首字母会在滑动过程吸附在屏幕上方,支持页眉和页脚,也就是可以列表添加头部和尾部。...我母亲制定官方介绍,这么说:有一些性能优化使得我ListView可以滚动更加平滑,尤其是动态加载可能很大(或者概念上无限长)数据集时候: 只更新变化行 - 提供了rowHasChanged...每一次渲染过程Footer(尾)该会一直列表底部,header(头)该会一直列表头部 renderHeader function 与上同理 renderRow function (rowData...返回一个可渲染组件来为这行数据进行渲染。默认情况下参数数据就是放进数据源数据本身,不过也可以提供一些转换器。

2K80

React Native UI界面还原,组件布局与动画效果

,JSX 源码通过 React 框架最终渲染到了浏览器真实 DOM React Native 框架,JSX 源码通过 React Native 框架编译后,通过对应平台 Bridge 实现了与原生框架通信...Flexbox构建响应式App最佳选择——CSS表现不太一致,React-Native并不是为web元素而生,不能像web 应用在html里面使用CSS这里还是体现了Weex...当样式复杂,建议使用StyleSheet.create来集中定义组件样式。...宽高单位与布局调整RN宽高可以直接通过style指定,与web不同是,RN尺寸是无单位,表示与设备像素无关逻辑像素点。组件样式中使用flex可以使其可利用空间中动态地扩张或收缩。...举个例子,要让输入接近-300 时取相反值,然后输入接近-100 到达 0,然后输入接近 0 又回到 1,接着一直到输入到 100 过程逐步回到 0,最后形成一个始终为 0 静止区间,对于任何大于

4.7K20

React Native学习笔记(三)—— 样式、布局与核心组件

只需要知道我们之所以要使用一个独立于设备分辨率单位,主要是为了让应用在不同分辨率设备,看起来一致。 RN,同样也拥有一个类似于dp长度单位。...类型决定了其父元素位置 position 取值: relative:(默认值),元素位置取决于文档流 absolute:元素会脱离正常文档流 import {StyleSheet, Text,...,是对原生组件封装 原生组件:Android或ios内组件 核心组件:RN中常用,来自react-native组件 原生组件​ Android 开发使用 Kotlin 或 Java...来编写视图; iOS 开发使用 Swift 或 Objective-C 来编写视图。..., Android 上则会渲染一个蓝色圆角矩形带白字按钮。

13.5K31

React Native之ScrollView控件详解

概述 ScrollViewAndroid和ios原生开发中都比较常见,是一个 滚动视图控件。RN开发,系统也给我们提供了这么一个控件。...不过RN开发使用ScrollView必须有一个确定高度才能正常工作,因为它实际上所做就是将一系列不确定高度子组件装进一个确定高度容器(通过滚动操作)。...所以,要给一个ScrollView确定一个高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都已经绑定了高度。视图栈任意一个位置忘记使用{flex:1}都会导致错误。...9:onScroll function 滚动过程,每帧最多调用一次此回调函数。调用频率可以用scrollEventThrottle属性来控制。...number 当设置了此属性,会让滚动视图滚动停止后,停止snapToInterval倍数位置

5.8K70

React-Native入门指南 终章

六、UI组件 1、目前React-Native支持组件 facebook React-native官网可以看到目前支持组件如下: https://facebook.github.io/react-native...七、JSXReact-Native应用 1、JSX概述 你一定疑问为什么要用JSX?其实这不是必需,而是建议。...只是因为React是作为MVCV,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树形结构,其实HTML超类就是XML,React-Native将这个带到了解放前,不可否认是...(3)属性 HTML,属性可以是任何值,例如:,tagid就是属性;同样,组件上可以使用属性。...(3) 将test/node_modules拷贝到ReactTest根目录下 (4) ReactTest项目中创建Group:Libraries (5) Group:Libraries添加依赖

1.4K20

React Native组件之VirtualizedList

React Native(简称RN)列表是基于ScrollView实现,也就是可以滚动,然而RN并没有直接使用IOS或Android原生列表组件,这是因为RN真正调用native代码过程是异步...早期版本,对于列表情况RN采用是ListView组件,和Android一样,早期ListView组件性能是非常,在后来版本,RN提供了系列用于提高列表组件性能组件:FlatList和...读者可以项目的“node_modules/react-native/Libraries/Lists/XXX”文件夹下找到相关源码。...当一个元素离可视区太远,它渲染优先级较低,否则就获得一个较高优先级,VirtualizedList通过这种机制来提高列表渲染性能。...使用VirtualizedList赢注意以下几点: 当某行滑出渲染区域之外后,其内部状态将不

1.4K20

仿腾讯课堂固定滚动列表ReactNative组件

跑起来运行后发现一个严重问题是,如果Tab导航控件内容区域存在ScrollView或者ListView,无法滚动,只有最外层可以滚动,也就是手势滚动被拦截了?...一开始想两种大思路:一种是完全靠JS层面,通过ScrollView暴露API去实现,第二种是原生+JS,这里涉及到几个关键东西,如何寻找Tab导航控件ScrollView或者ListView和控制手势实现效果...先卖个关子,解决这个问题之前,我们先来了解下AndroidView事件是如何传递。 正所谓知己知彼,百战不殆,看看Android触摸事件类型有哪些?...需要在 MotionEvent.ACTION_DOWN 事件,通过前面分析条件寻找第一个子 ScrollView ,代码如下: private ScrollView findScrollView...) { //获取view整个屏幕坐标如果x==0的话代表这个scrollview是正在显示 int[] location

4.8K70

硬核实践经验 - 企鹅辅导 RN 迁移及优化总结

其中 ViewPager 为第三方组件,底层实现在 IOS 环境下为 ScrollView,Android 环境下则为 AndroidViewPager,首页主要渲染逻辑如下 优化之路 随着整体架构的确定...我们滑动位置监听函数也判断了组件当前offset,当其距离基准点小于某个值时候就可以触发重定位,用肉眼看不出来抖动代价,解决滑动到边界才触发重定位问题。...最后我们想到了一个办法,将所有内容相同item共享缩放,如item序列45[12345]12所有相同数字对应item同时缩放。如何做到?...系统下,我们使用一个元素measure方法来获取其位置,从回调函数拿到值返回是空值。...(例子为 View)加上 onLayoutprops;如果你 View 组件上使用 onLayout,那将不会有问题;如果没有你可以加一个空 onLayout : onLayout=()=>{}。

3.6K30

【React Native 安卓开发】----侧边栏实现DrawerLayoutAndroid以及第三方框架react-native-side-menu使用【第六篇】

那么今天也在这里给大家介绍一下React-Native侧滑菜单DrawerLayoutAndroid和第三方框架react-native-side-menu。...抽屉(通常用于导航切换)是通过renderNavigationView方法渲染,并且DrawerLayoutAndroid直接子视图会成为主视图(用于放置你内容)。...导航视图一开始屏幕上并不可见,不过可以从drawerPosition指定窗口侧面拖拽出来,并且抽屉宽度可以使用drawerWidth属性来指定。...settling(停靠),表示用户刚刚结束与导航条交互,导航条正在结束打开或者关闭动画。...renderNavigationView function 此方法用于渲染一个可以从屏幕一边拖入导航视图。 样例 ?

6.6K40

7. 偷用Swiper简改

实验性项目无法发布到市场,决定整改 项目改名为RNDouBan,决定做一个用react-native简单豆瓣客户端 测试版发布到google市场以获取豆瓣sdk做第三方豆瓣登录才好往下做...Pager如果是ios就使用横向ScrollView,修改后app首页如下: import React, { PropTypes, } from 'react'; import {...里面会有三个数据加载 初始化,初始化时候数据为空[]显示页面加载条 下拉刷新,不显示页面加载条,清空原来数据 上拉加载,显示加载更多并且将第二页数据连接到原来数据 一定要注意三种状态如何渲染页面以及对...RSA -keysize 2048 -validity 10000,keytool命令就不做详细介绍了,如果windows系统找不到,可以使用gitbash 证书生成之后复制到android/app.../gradlew installRelease可以设备上测试安装,注意如果是调试机请先卸载debugapk不然会安装失败。

1.9K30

React Native之ListView实现九宫格效果

概述 安卓原生开发,ListView是很常用一个列表控件,那么React Native(RN)如何实现该功能呢?...我们来看一下ListView源码 ListView是基于ScrollView扩展得来,所以具有ScrollView相关属性: dataSource:数据源,类似于安卓我们传入BaseAdapter...renderRow:渲染某一行,类似于BaseAdaptergetItem方法。 onEndReached:简单说就是用于分页操作,安卓中原生开发,我们需要自己实现相应方法。...(该属性是继承与ScrollView) renderHeader:渲染头部View,类似于安卓ListViewaddHeader....pageSize:渲染网格数,类似于安卓GridViewnumColumns. contentContainerStyle:该属性是继承于ScrollView,主要作用于该组件内容容器上。

2.6K50

react-native总结心得

一、prop,state,ref 1.ref:引用一个组件(是从render返回该组件实例) 2.props:组件属性, 2.1常用于跳转页面的传值:this.props.navigator.push...({component:xxx,id:this.props.id}) 2.2不同组件之间传值 2.3子组件向父组件传值 3.state:组件状态 父组件向子组件传值 二、react-native...组件思想 react-native组件其实是采用react组件思想,所以强烈推荐先把react给看了最重要就是组件生命周期(所有开发都有开发周期说法): ?...组件在运行,有以下几种情况: 1.直接结束,到达(7)表示组件即将卸载销毁,一般这时候销毁监听removeAllListeners 2.状态state改变,到达(9)组件判断是否重新渲染时调用,是根据你...state状态有没有改变页面判定(有兴趣可深入了解(9)提高组件判定效率从而提升组件效率) 2.1不重新渲染,回到组件运行状态 2.2重新渲染,进入(5)组件即将更新,然后render渲染

1.3K20
领券