使React Native的ScrollView滚动

最新推荐文章于 2021-05-13 09:32:34 发布
最新推荐文章于 2021-05-13 09:32:34 发布
阅读量643 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gaoyp/article/details/85072546
版权


ScrollView的style的height无效。
ScrollView的实现就是尽量把父View的高度都占了。

所以要实现ScrollView的滚动，需要限定ScrollView父View的高度。

 <View  style={{height:50}}>
 <ScrollView >
        <View style={myStyles.a}></View>
        <View style={myStyles.b}></View>
        <View style={myStyles.b}></View>
        <View style={myStyles.b}></View>
    </ScrollView>
</View>

gaoyp
关注
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview
2401_84447417的博客
04-29 1034
ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1。
React Native 函数组件 ScrollView 滚动到顶部
qq_40088255的博客
04-10 589
React Native 函数组件 ScrollView 滚动到顶部 // 引入 useRef import React, {useRef} from "react"; // 定义变量 let scrollRef = useRef(); // 页面引用 <ScrollView style={styles.scrollContent} ref={scrollRef}> <View style={styles.content}>
React Native之使用滚动视图
蓝枫
01-02 504
import React, {Component} from 'react'; import { AppRegistry, Text, ScrollView } from 'react-native'; export default class HelloWorld extends Component { render() { return (...
react-native中使用滚动视图
weixin_30273175的博客
04-02 410
ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。 ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。 先看效果gif图 代码如下： import React, { Component } from 'react'; import { AppRegistry, ScrollView, Image...
【React Native开发】React Native控件之ScrollView组件讲解(14)
江清清的专栏
01-29 8786
(一)前言        【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:http://www.lcode.org         今天我们一起来看一下滚动视图ScrollView组件的介绍和使用讲解。         刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢
react native ScrollView 使用详解
热门推荐
老孟Flutter
04-18 1万+
ScrollView 是一个滚动控件，当内容显示不全时可以通过滚动显示。属性： View props… :View的所有属性 contentContainerStyle：内容容器的样式，所有的子视图都会包裹在内容容器内。 horizontal：为true时，横向滚动 keyboardDismissMode ：用户拖拽滚动视图的时候，是否要隐藏软键盘。 non
react-native-scroll-direction：一个ScrollView和FlatList，尝试公开用户滚动的方向
02-14
在React Native开发中，`react-native-scroll-direction`是一个非常实用的库，它为ScrollView和FlatList组件添加了一个功能，即能够检测并公开用户的滚动方向。这个特性对于创建响应式和交互式的用户界面至关重要，...
【JavaScript源代码】react native之ScrollView下拉刷新效果.docx
12-29
在React Native中，`ScrollView`组件是用于创建可滚动视图的一个重要元素，它可以包含多个子组件，并且支持垂直和水平滚动。当涉及到下拉刷新功能时，`ScrollView`提供了`refreshControl`属性来实现这一功能。在本文...
React Native之ScrollView判断滚动方向
举世武双的博客
02-22 5503
2019-02-22   1、在一个onScrollBeginDrag回调方法（ScrollView开始拖动开始时触发）中记录event.nativeEvent.contentOffset.y：Y轴滚动的偏移量。   2、在onScroll滚动事件回调方法中判断当前contentOffset.y与记录的Y轴滚动的偏移量： （1）若记录的Y轴滚动的偏移量 &lt; 当前contentOff...
React Native零碎笔记一:ScrollView的简单应用
W
11-03 679
这一篇记录一下ScrollView。学习一个新的组件，一般要先看看它的官方文档，这里先放个ScrollView的官方文档在这，以后回顾的时候就直接跳过去看： 英文版：http://facebook.github.io/react-native/docs/scrollview.html 中文版：http://reactnative.cn/docs/0.36/scrollview.html#c
react-native 不让输入框出现滑动的效果
lx_1024的博客
12-20 1242
最近做项目时遇到的输入框会上下滑动，原因不太懂，应该是跟高度有关，处理的方式就是设置lineHeight，设置为和高度一样，例如： &lt;TextInput style={{height: 20,lineHeight: 20, fontSize: 18}} underlineColorAndroid="transparent" maxLength={17} caretHidd...
React Native 之 ScrollView使用
黑森林工作室
11-08 1万+
前言 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢 ScrollView组件介绍
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解
IT全栈 华强工作室
05-13 4371
文章目录属性Style ScrollView 必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给 ScrollView 一个确定高度的话，要么直接给它设置高度（不建议，要么确定所有的父容器都有确定的高度。一般来说我们会给 ScrollView 设置 flex: 1， 以使其自动填充父容器的空余空间，但前提条件是所有的父容器本身也设置了flex或者指定了高度，否则就会导致无法正常滚动，你可以使用元素查看器来查找具体哪一层高度不正确。
react native scrollview深入详解触摸滚动事件
liu__520的博客
12-15 1万+
大家都知道scrollview的几个属性和方法：详细的方法请参考： 江清清专栏：React Native控件之ScrollView组件讲解(14) 这里我就讲解下scrollview的触摸和滑动顺序，并讲解下scrollview的几个触摸方法 1、几个已知的滑动或者滑动开始结束的方法： onScroll：在滚动过程中, 每帧最多调用一次此函数, 调用的频率可以用scro
react native 垂直 scrollview 自动滚动，自动播放文字，垂直走马灯效果
qq_32683045的博客
08-13 3502
您需要的是垂直自动控制滚动scrollview 或者，类似垂直的走马灯效果，可以用onLayout获取scrollview内部textview的高度，然后知道行高，在用scrollTo去驱使滚动，看代码 <ScrollView ref={(ref) => this.scrollview = ref} > <Text onLayout={(res...
react-native scrollView nativeEvent滑动距离等参数
qq_39558062的博客
06-23 1646
{ nativeEvent: { contentInset: {bottom, left, right, top}, contentOffset: {x, y}, //滑动距离 contentSize: {height, width}, //列表的宽高 layoutMeasurement: {height, width}, //显示出来的宽高 zoomScale } }
React Native 中的 ScrollView 基本使用
wang_gwei的博客
12-29 9762
最近老大想接了个项目 想让我们 通过React Native 来实现 等技术成熟后 把我们自己的APP 也通过React Native 来实现 这样既可以实现跨平台 又可以 实现热更新。 所以，近期看了React Native 中文网 开始尝试着写一点小功能的东西试试 闲话少叙 今天先从 ScrollView 开始：         1、ScrollView介绍：ScrollVi
React Native中监听ScrollView滑到底部事件监听
大灰狼的小绵羊哥哥的博客
08-02 1万+
需求：RN 页面中，需要对scrollView滑到底部，上传事件。 首先找到ScrollView 中滑动结束后触发的函数 可以找到onMomentumScrollEnd ScrollView style={{flex:1}} onRefresh = {this._onRefreshData} onMom
react-native ScrollView触摸与滚动事件
qq_30053399的博客
08-29 7924
ScrollView是我们常用的组件之一，因此搞清楚它的触摸与滚动事件十分重要！1.在ScrollView里面轻触一下（1）onStartShouldSetResponderCapture 这个属性接收一个回调函数，函数原型是 function(evt): bool，在触摸事件开始（touchDown）的时候，RN 容器组件会回调此函数，询问组件是否要劫持事件响应者设置，自己接收事件处理，
React Native ScrollView与ListView实例：轮播图与列表展示技巧
在React Native开发中，ScrollView组件和ListView都是重要的基础组件，用于处理列表和滚动内容展示。ScrollView是一个可滚动的容器，它允许开发者创建可以水平或垂直滚动的视图，提供丰富的交互体验。 ScrollView的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值