React Native之 ScrollView

最新推荐文章于 2019-09-16 10:31:00 发布
最新推荐文章于 2019-09-16 10:31:00 发布
阅读量719 收藏
点赞数
分类专栏： 【React-Native2点滴知识 】
本文详细介绍了React Native中ScrollView组件的属性及其应用场景，包括contentContainerStyle、horizontal、keyboardDismissMode等，并通过实例展示了如何构建带有图片和文字的滚动视图。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

http://godcoder.me/categories/%E6%8A%80%E6%9C%AF%E5%8D%9A%E5%AE%A2/React-Native/

  • contentContainerStyle 这个样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。
  • horizontal 如果设为true，意思是我吃的东西都是左右，在水平方向上排列的，貌似不太容易消化（玩笑），默认false，当然是垂直方向了。
  • keyboardDismissMode enum(‘none’, ‘interactive’, ‘on-drag’) 当我滚动的时候，是否隐藏键盘
    • none（默认值），拖拽时不隐藏软键盘。
    • on-drag 当拖拽开始的时候隐藏软键盘。
    • interactive 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选项，会表现的和none一样。
  • keyboardShouldPersistTaps 当此属性为false的时候，在软键盘激活之后，点击焦点文本输入框以外的地方，键盘就会隐藏。如果为true，滚动视图不会响应点击操作，并且键盘不会自动消失。默认值为false。
  • onContentSizeChange function 该函数方法会在ScrollView内部可滚动内容的视图发生变化时调用。
  • onScroll function 在滚动的过程中，每帧最多调用一次此回调函数。调用的频率可以用scrollEventThrottle属性来控制。
  • pagingEnabled 如果为true，滚动视图的滚动视图大小的倍数滚动时停止。这可用于水平分页。默认值false。
  • refreshControl 告诉RefreshControl组件，为我供下拉刷新功能。
  • removeClippedSubviews （实验属性） 当为true的时候。在ScrollView视图之外的视图(该视图的overflow属性值必须要为hidden)会从被暂时移除，该设置可以提高滚动的性能。
  • scrollEnabled 为false时，内容视图不可以滚动，默认值true。
  • showsHorizontalScrollIndicator 当为true时，显示水平滚动条
  • showsVerticalScrollIndicator 与上面正好相反。

我的穿衣打扮

来，一起来看看，我有哪些外在的服饰和化妆品，可以使用更佳美观和漂亮，修饰我的内在和外在。

  • backfaceVisibility ([‘visible’, ‘hidden’]) 显示还是隐藏
  • backgroundColor color 背景色
  • borderBottomColor color 底部边框颜色
  • borderBottomLeftRadius number 左下角圆角大小
  • borderBottomRightRadius 自己翻译（与上同理）
  • borderBottomWidth 底部边框宽度
  • borderColor color 边框颜色
  • borderLeftColor color
  • borderLeftWidth number 同理
  • borderRadius number 四周圆角大小
  • borderRightColor color
  • borderRightWidth number
  • borderStyle （[’solid’, ‘dotted’, ‘dashed’]) 边框的样式，是实现，还是点，还是虚线
  • borderTopColor color
  • borderTopLeftRadius number
  • borderTopRightRadius number
  • borderTopWidth number
  • borderWidth number 边框宽度
  • opacity number 设置透明度
  • overflow ([‘visible’, ‘hidden’])
  • androidelevation number android5.0以上有的，立体阴影效果
  • 我只介绍了以上常用的的风格，还有几个和android相关，还有很多与ios相关的属性，我就不再介绍了，自己去官方文档查查吧。地址：[ https://facebook.github.io/react-native/docs/scrollview.html ]

逻辑实现

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

class ImageDemo extends Component {
  render() {
	return (
	  <View style={styles.container}>
		 <View style={styles.title_view}>
		 <Text style={styles.title_text}>
			   空间动态
		 </Text>
		</View>
		<ScrollView  ref={(scrollView) => { _scrollView = scrollView; }}>
		<View style={styles.three_image_view}>
		 <View style={styles.vertical_view}>
			  <Image source={require('./img/igs.png')} style={{alignSelf:'center',width:45,height:45}} />
			  <Text style={styles.top_text}>
				好友动态
			  </Text>
		 </View>
		  <View style={styles.vertical_view}>
			  <Image source={require('./img/eqc.png')} style={{alignSelf:'center',width:45,height:45}}/>
			  <Text style={styles.top_text}>
				附近
			  </Text>
		 </View>
		  <View style={styles.vertical_view}>
			  <Image source={require('./img/iei.png')} style={{alignSelf:'center',width:45,height:45}}/>
			  <Text style={styles.top_text} >
				兴趣部落
			  </Text>
		 </View>
		</View>
		<View style={{height:30,backgroundColor:'#f9f9fb'}}/>
		<View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				羽毛球
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				火车票
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				视频
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				羽毛球
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				火车票
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				视频
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				羽毛球
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				火车票
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				视频
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				羽毛球
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				火车票
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				视频
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				羽毛球
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				火车票
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				视频
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				羽毛球
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				火车票
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 <View style={styles.rectangle_view}>
		  <View style={{flexDirection:'row',alignItems: 'center'}}>
			  <Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
			  <Text style={styles.rectangle_text} >
				视频
			  </Text>
		  </View>
		  <Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
		 </View>
		 </ScrollView>
		 <TouchableOpacity
		  style={styles.button}
		  onPress={() => { _scrollView.scrollTo({y: 0}); }}>
		  <Text>让我滚回去</Text>
		</TouchableOpacity>
	  </View>
	);
  }
}

const styles = StyleSheet.create({
 container: {
	flex: 1,
	backgroundColor: 'white',
  },
   title_view:{
	flexDirection:'row',
	height:50,
	justifyContent: 'center',
	alignItems: 'center',
	backgroundColor:'#27b5ee',
  },
   title_text:{
	color:'white',
	fontSize:20,
	textAlign:'center'
  },
  three_image_view:{
	paddingTop: 15,
	flexDirection:'row',
	justifyContent: 'space-around',
	alignItems: 'center',
	backgroundColor:'white',
  },
  vertical_view:{
	justifyContent: 'center',
	alignItems: 'center',
	backgroundColor:'white',
	paddingBottom:15,
  },
   top_text:{
	marginTop:5,
	color:'black',
	fontSize:16,
	textAlign:'center'
  },
  rectangle_view:{
	paddingTop:8,
	paddingBottom:8,
	paddingLeft:15,
	paddingRight:15,
	flexDirection:'row',
	justifyContent: 'space-between',
	alignItems: 'center',
	backgroundColor:'white',  
	borderBottomColor:'#dedfe0',
	borderBottomWidth:1,
  },
  rectangle_text:{
	color:'black',
	fontSize:16,
	textAlign:'center',
	paddingLeft:8,
  },
  button: {
	margin: 7,
	padding: 5,
	alignItems: 'center',
	backgroundColor: '#eaeaea',
	borderRadius: 3,
  },

});

AppRegistry.registerComponent('ImageDemo', () => ImageDemo);

ok,到这里ScrollView就讲完了，由于非常简单，大家赶紧去练练手吧！不懂的可以在下面留言，由于我也是第一次学，欢迎大家提出不足，一起交流学习。



React Native之ScrollView控件详解
xiangzhihong8的专栏
12-17 2万+
概述ScrollView在Android和ios原生开发中都比较常见，是一个 滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。 所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview
最新发布
2501_90225735的博客
01-18 313
【代码】ReactNative进阶（二十五）：ScrollView滚动视图组件详解_reactnativescrollview。
React Native常用组件之ScrollView
weixin_34109408的博客
09-14 219
1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该ScrollView进行高度设置(不建议) 第二种: ScrollView中不要加{flex:1} ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者 2. Scr...
React Native 之 ScrollView使用
黑森林工作室
11-08 1万+
前言 学习本系列内容需要具备一定 HTML 开发基础，没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长，所以对其中的内容和性质了解可能会有所偏差，在学习中如果有错会及时修改内容，也欢迎万能的朋友们批评指出，谢谢 文章第一版出自简书，如果出现图片或页面显示问题，烦请转至 简书 查看 也希望喜欢的朋友可以点赞，谢谢 ScrollView组件介绍
React Native 之ScrollView
weixin_30681615的博客
09-16 249
import React, { Component } from 'react' import { Text, StyleSheet, View, Button ,TouchableOpacity,Alert,ScrollView,Image} from 'react-native' import { createStackNavigator, createAppContaine...
React Native 之 ScrollView
李浩然的专栏
04-10 819
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, TouchableOpacity
【JavaScript源代码】react native之ScrollView下拉刷新效果.docx
12-29
在React Native中，`ScrollView`组件是用于创建可滚动视图的一个重要元素，它可以包含多个子组件，并且支持垂直和水平滚动。当涉及到下拉刷新功能时，`ScrollView`提供了`refreshControl`属性来实现这一功能。在本文...
React Native Spring ScrollView V2是一个用于React Native的高性能跨平台原生ScrollView滚动。（iOS和Android）-JavaScript开发
05-26
React Native Spring ScrollView！React Native Spring ScrollView V2是用于React Native的高性能跨平台原生ScrollView。（iOS和Android）很容易支持拉动刷新和拖动以加载更多数据。 React Native Spring ScrollView...
ReactNative中ScrollView组件
骑驴找马追骆驼_so的博客
01-06 485
关于ScrollView ScrollView是一个通用的可滚动的控件，可以放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动 一般使用ScrollView满足俩点即可 ScrollView必须有一个确定的高度才能正常工作 将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作） 通常有两种做法： 1、 直接给该ScrollV
react-native中使用ScrollView组件自己封装走马灯
01-08
使用ScrollView替代View可以实现安全范围内的滚动 showsVerticalScrollIndicator隐藏滚动条 制作轮播图 import { View, Text, StatusBar, SafeAreaView, StyleSheet, ScrollView, Image, Dimensions, } from 'react-native'; const screenWidth = Math.round(Dimensions.get('window').width); const App = () => { const scrollR
React Native--ScrollView组件轮播图与ListView渲染列表组件
theVicTory的博客
04-20 1880
1、Scroll View ScrollView是React Native提供的滚动视图组件，渲染一组视图，用户可以进行滑动响应交互，其常用属性如下： 滚动的偏移量：通过event.nativeEvent.contentOffset.x可以得到水平偏移量。 horizontal={bool}，属性为true时，所有子视图在水平方向排列，否则在纵向排列。默认为false。 pagin...
React Native 中的 ScrollView 基本使用
wang_gwei的博客
12-29 9878
最近老大想接了个项目 想让我们 通过React Native 来实现 等技术成熟后 把我们自己的APP 也通过React Native 来实现 这样既可以实现跨平台 又可以 实现热更新。 所以，近期看了React Native 中文网 开始尝试着写一点小功能的东西试试 闲话少叙 今天先从 ScrollView 开始：         1、ScrollView介绍：ScrollVi
React Native - ScrollView
weixin_33726318的博客
07-04 129
做过iOS原生开发的小伙伴都知道，ScrollView使用的频率比较高，UITableView和UICollectionView都是继承自UIScrollView，RN中当然也不可能缺少这样的神奇组件。 ScrollView必须要有一个确定高度才能正常工作，ScrollView内部得其他响应者尚无法阻止ScrollView本身成为响应者。 用ScrollView和定时...
react native中关于ScrollView
qq_21478985的博客
06-06 580
遇到的问题：用ScrollView时不能滑动原因：ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1以使其自动填充父容器的空余空间，但前提条...
ScrollView-基本设置
weixin_30257433的博客
09-24 579
一: 掌握两点: 1. ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都已经绑定了高度。在视图栈的任意一个位置忘记使用{flex:1}都会导致错误，你可以使用元素查看器来查找问题的原因。 2. Sc...
react-native---rn中的滑动视图组件（ScrollView）
热门推荐
Wbiokr的博客
01-22 1万+
ScrollView组件介绍与简单使用 React Native中的 ScrollView 的组件除了包装滚动平台，还集成了触摸锁定的 响应者 系统，使用的时候有几点需要注意 //ScrollView 必须有一个确定的高度才能正常工作,对于 ScrollView 来说，它就是将一些不确定高度的子组件装进确定高度的容器 //初始化的2中方式 1. 给 ScrollView 中加 [
浅谈react native中的ScrollView
小小发的博客
05-08 8237
1、ScrollView介绍（官方解释）：ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。2、ScrollView常用属性： horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值