腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >ReactNative，如何在ScrollView中获取位置FlatList项

问ReactNative，如何在ScrollView中获取位置FlatList项
EN

Stack Overflow用户

提问于 2019-07-18 01:52:33

回答 1查看 2.4K关注 0票数 2

当我在ScrollView中单击Item时，我希望将父position滚动到该项position。

由于实际数据长度灵活，不能静态计算高度。

<ScrollView>
  <View style={{height:300}}>
    <Text>Test</Text>
  </View>
  <FlatList
    scrollEnabled={false}
    data={[1,2,3,4,5,6,7,8,9,10]}
    renderItem={renderItem}
  />
</ScrollView>

ScrollToIndex在FlatList中不能使用，因为scrollEnabled是false。我想使用父ScrollTo的ScrollView。

但onLayout用于renderItem，y为0。所以我不知道确切的位置。

我怎样才能得到我想要的价值？

react-native

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-18 04:45:19

首先，不要在ScrollView中使用ScrollView，在FlatList中使用ListHeaderComponent支柱

参考资料：https://facebook.github.io/react-native/docs/flatlist#listheadercomponent

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57091774

复制

React Native年度报告(2017-2018)

reactnative

概述在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代，我们看到在这十几次的版本迭代中React Native的组件库在不断地壮大，在新引进的组件中既有FlatList、SectionList等具有更高性能的列表组件，也有与时俱进的用于适配全屏幕的SafeAreaView组件，同时呢，一些性能较差、无法适应React Native未来发展的一些老的组件，如：ListView、Navigator等组件也逐渐退出了沙场。本文将向大家总结React Native在过去的一年

CrazyCodeBoy

2018/05/07

2.7K0

React Native跨平台开发2017 年终总结

api android react ios javascript

从2016年开始关注React Native到现在，React Native的每一个版本发布我都会关注一下，虽然最近将重心转移到区块链开发上，这一年里，我还出版了一本《React Native移动开发实战》的书。在过去的一年中React Native经历了十几次的版本迭代，版本也从从v0.40升级到v0.52，总体来说，版本迭代没以前那么频繁，组件也越来越丰富，稳定性也越来越好了，下面就一些新组件，新API进行相关的总结。

xiangzhihong

2022/11/30

2.5K0

移动跨平台框架ReactNative滚动视图ScrollView【17】

react javascript

低头一族的我们，每天花大把大把的时间拉啊拉啊。当屏幕的内容超过一屏时，我们很熟练的往上拉一点就可以看到剩下的内容了，这时候右边还会滚动条告诉我们这是可以往上拉的。

江一铭

2022/06/17

1.4K0

JavaScript 中获取光标位置

http node.js html

DOM中并没有直接获取光标位置的方法，那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围，我们可以以此为切入点，来获取或定位光标的位置，当选取范围起始点和结束点一样时，就是光标插入的位置。

越陌度阡

2020/11/26

12.5K0

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

android reactnative

前言由于业务需要做成类似腾讯课堂课程详情滚动的效果，考虑到后面有可能有新的呈现方式，RN提供的组件没有这种滚动控件，不如自己封装，其实去年已经写了一篇但是写的比较乱，周末花了点时间重写梳理下做的东西

用户1148881

2018/03/19

4.9K0

ReactNative 获取屏幕宽高

react nat

需要导入Dimensions let Dimensions = require('Dimensions'); // 示例 class KKScreen { static width() { return Dimensions.get('window').width; } static height() { return Dimensions.get('window').height; } static scale() {

onety码生

2018/11/21

2.1K0

Flutter 中获取地理位置[Flutter专题11]

flutter android ios uml http

如今，发现用户位置是移动应用程序非常常见且功能强大的用例。如果您曾经尝试过在 Android 中实现位置，您就会知道样例代码会变得多么复杂和混乱。

徐建国

2021/11/30

3.3K0

unity3d scrollview 滚动层dotween移动到指定位置：例如有10项，滚动到第9项

public scrollview spacing unity3d void

立羽

2023/08/24

5570

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

reactnative

写React Native UI和写 Android XML layout 布局，个人感觉是大同小异

周陆军博客

2023/04/09

4.8K0

springboot logback中动态获取application中配置项

spring

在多环境的情况下，logback的日志路径需要进行针对性配置，也就是需要通过application.yml文件中进行配置。

程序新视界

2022/05/06

8430

webview 和 React Native 中吸顶效果实现

react webview javascript 网站

在跨端开发中，离不开一些吸顶的交互场景，可以参考淘宝或是京东类电商 app 中一些 tab ，在整个容器滑动的过程中，吸顶效果非常的连贯和丝滑的，当然这些 tab 可能是用 native 开发的，但是跨端应用也能实现很不错的吸顶效果，那么今天我们就来研究一下跨端开发是如何实现吸顶的。

用户6835371

2022/09/21

3.1K0

如何在 WPF 中获取所有已经显式赋过值的依赖项属性

wpf var 遍历对象协议

获取 WPF 的依赖项属性的值时，会依照优先级去各个级别获取。这样，无论你什么时候去获取依赖项属性，都至少是有一个有效值的。有什么方法可以获取哪些属性被显式赋值过呢？如果是 CLR 属性，我们可以自己写判断条件，然而依赖项属性没有自己写判断条件的地方。

walterlv

2023/10/22

2130

Flutter中的获取设备信息以及获取地理位置

ios android device location 高德地图

在使用之前，我们一定要好好阅读文档，关于Android以及iOS平台的相关配置，我在这里不做过多介绍，大家自己去看文档。

拉维

2019/09/10

12.3K0

通过IP获取位置

api php json https

昨天写了个获取天气的API，那么我也该写一个调用这个API的Demo了。不过获取天气必须要城市名称，而Demo上不可能在弄一个输入城市的吧……好在，可以通过IP获取所在城市。 <?php if(iss

FHYC

2018/06/22

1.8K0

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

react android

React Native系列《逻辑性最强的React Native环境搭建与调试》《ReactNative开发工具有这一篇足矣》《解决React Native unable to load

磊哥

2018/05/08

4.6K0

史上最易懂——ReactNative分组列表SectionList使用详情及示例详解

获取地理位置

html ntp git

可根据获取到的经纬度查询到所在的地理位置。 <p><button onclick="geoFindMe()">Show my location</button></p> <div id

ProsperLee

2018/10/24

2K0

🤯 没 2 年 React Native 开发经验，你都遇不到这些坑

api react android webgl svg

React Native 开发时，如果只是写些简单的页面，基本上按着官方文档 reactnative.dev[1] 就能写出来，但是 React Native 的 API 有几百个，没有一定的开发踩坑经验，面对一些新的需求时确实会抓不到重点。

卤代烃

2021/09/29

4.4K1

如何在 Android 模拟器中模拟 GPS 位置

https 网络安全 tcp/ip android go

可以通过 Telnet 连接到仿真器。然后你有一个模拟器控制台，可以让你输入某些数据，比如地理定位、网络等。

张云飞Vir

2021/12/06

9.8K0

React Native组件之VirtualizedList

渲染 android listview react

React Native（简称RN）列表是基于ScrollView实现的，也就是可以滚动的，然而RN并没有直接使用IOS或Android的原生列表组件，这是因为RN真正调用native代码的过程是异步的，二Native的渲染要求必须同步渲染的。

xiangzhihong

2022/11/30

1.4K0

点击加载更多

相似问题

ReactNative - ScrollView中的Flatlist

ReactNative Flatlist -优化Flatlist项的性能

ReactNative FlatList嵌套在FlatList中

在FlatList (和ScrollView)中锁定滚动位置

ReactNative FlatList scrollToIndex问题

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问ReactNative，如何在ScrollView中获取位置FlatList项
EN