基础篇章：React Native之 ScrollView 的讲解

最新推荐文章于 2024-04-29 00:32:49 发布
最新推荐文章于 2024-04-29 00:32:49 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： RN技术系列 文章标签： native 移动 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/loongggdroid/article/details/54142868
版权

大家好，我是ScrollView，相信做过移动或者前端开发的人肯定都很熟悉我，对，我就是那个可以滚动的容器，滚有点难听，我是可以滑动的容器，我滑动起来，摩擦摩擦，似魔鬼的步伐。我不仅可以上下滚动，就是垂直，还可以左右滚动，这叫有水平。我厉不厉害？我这个人，为人心胸宽广，可以包容很多东西，我这叫宰相肚子里能撑船，什么组件，什么视图都可以放进来，主要是本人太饿了，啥都喜欢吃。这就是我的自我介绍。

关于我，我还想说，我这个人身上笑点比较低，随便一触摸就想笑，当然，你们摸我，让我干什么事，我还是很听话的，唯独有一点就是你们别想让我滚，让我滚是有条件的，条件就是必须让我吃饱，吃撑了才可以，这样我才有力气滚动（视图高度一定才可以滚动）。要么设置我的身高是固定的，当然我想长高，所以不建议这么做，要么就是设置我上级的高度，当然要这样做，不要忘了设置flex:1,要不然一样没用。

我的性格

来看看我有哪些性格特点，只有知道了我的性格特点，才更能容易了解我，针对我，容易控制我啊，如果你不了解我，就想让我帮你干活？做梦去吧。
* 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]

我的秀丽身材

闻其声不见其人，光知道我，没见过我岂不是很out？像我这么美的人，你们不用我，是不是有点那个啥？哈哈……

魔鬼样子

逻辑实现

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就讲完了，由于非常简单，大家赶紧去练练手吧！不懂的可以在下面留言，由于我也是第一次学，欢迎大家提出不足，一起交流学习。

欢迎关注微信公众号：非著名程序员（smart_android），每天每周定时推送原创技术文章。所有技术文章， 均会在微信订阅号首发，关注微信公众号可以及时获得技术文章推送。

非著名程序员
关注
专栏目录
React Native之ScrollView控件详解
xiangzhihong8的专栏
12-17 2万+
概述ScrollView在Android和ios原生开发中都比较常见，是一个 滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。 所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所
React Native之react-native-scrollable-tab-view详解
热门推荐
xiangzhihong8的专栏
05-25 2万+
在React Native开发中，官方为我们提供的Tab控制器有两种：TabBarIOS和ViewPagerAndroid。TabBarIOS，仅适用于IOS平台 ViewPagerAndroid，仅适用于Android平台（严格来讲并不算，因为我们还需要自己实现Tab）。在项目开发中，我们优先选择一些开源兼容性比较好的第三方库，例如，react-navigation，以及本文即将说到的react
React Native常用组件之ScrollView
weixin_34109408的博客
09-14 161
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
大灰狼的小绵羊哥哥的博客
03-10 644
contentContainerStyle 这个样式会应用到一个内层的内容容器上，所有的子视图都会包裹在内容容器内。horizontal 如果设为true，意思是我吃的东西都是左右，在水平方向上排列的，貌似不太容易消化（玩笑），默认false，当然是垂直方向了。keyboardDismissMode enum(‘none’, ‘interactive’, ‘on-drag’) 当我滚动的时候，是否
React Native 之ScrollView
weixin_30681615的博客
09-16 205
import React, { Component } from 'react' import { Text, StyleSheet, View, Button ,TouchableOpacity,Alert,ScrollView,Image} from 'react-native' import { createStackNavigator, createAppContaine...
ReactNative进阶（二十五）：ScrollView 滚动视图组件详解_react native scrollview
最新发布
2401_84447417的博客
04-29 1033
ScrollView在Android和ios原生开发中都比较常见，是一个滚动视图控件。在RN开发中，系统也给我们提供了这么一个控件。不过在RN开发中 ，使用ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。所以，要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1。
React Native控件之ScrollView组件详解
MN1107
06-25 1万+
React Native控件之ScrollView组件详解（一）前言这篇文章我们来讲解一下ScrollView，这个组件是在实际开发过程中用得非常多的，因为移动设备本来就比较小，所以只能通过滚动视图来包含更多的视图。该组件学习相对之前的有一定难度。该组件封装了Android平台的ScrollView控件和iOS平台的UIScrollView控件，并且提供了触摸事件“responder”系统功能。使用
React Native 之 ScrollView
李浩然的专栏
04-10 729
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, TextInput, TouchableOpacity
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
ReactNative中ScrollView组件
骑驴找马追骆驼_so的博客
01-06 436
关于ScrollView ScrollView是一个通用的可滚动的控件，可以放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动 一般使用ScrollView满足俩点即可 ScrollView必须有一个确定的高度才能正常工作 将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作） 通常有两种做法： 1、 直接给该ScrollV
React Native 中的 ScrollView 基本使用
wang_gwei的博客
12-29 9761
最近老大想接了个项目 想让我们 通过React Native 来实现 等技术成熟后 把我们自己的APP 也通过React Native 来实现 这样既可以实现跨平台 又可以 实现热更新。 所以，近期看了React Native 中文网 开始尝试着写一点小功能的东西试试 闲话少叙 今天先从 ScrollView 开始：         1、ScrollView介绍：ScrollVi
React Native - ScrollView
weixin_33726318的博客
07-04 92
做过iOS原生开发的小伙伴都知道，ScrollView使用的频率比较高，UITableView和UICollectionView都是继承自UIScrollView，RN中当然也不可能缺少这样的神奇组件。 ScrollView必须要有一个确定高度才能正常工作，ScrollView内部得其他响应者尚无法阻止ScrollView本身成为响应者。 用ScrollView和定时...
react native中关于ScrollView
qq_21478985的博客
06-06 482
遇到的问题：用ScrollView时不能滑动原因：ScrollView必须有一个确定的高度才能正常工作，因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器（通过滚动操作）。要给一个ScrollView确定一个高度的话，要么直接给它设置高度（不建议），要么确定所有的父容器都有确定的高度。一般来说我们会给ScrollView设置flex: 1以使其自动填充父容器的空余空间，但前提条...
react-native---rn中的滑动视图组件（ScrollView）
Wbiokr的博客
01-22 1万+
ScrollView组件介绍与简单使用 React Native中的 ScrollView 的组件除了包装滚动平台，还集成了触摸锁定的 响应者 系统，使用的时候有几点需要注意 //ScrollView 必须有一个确定的高度才能正常工作,对于 ScrollView 来说，它就是将一些不确定高度的子组件装进确定高度的容器 //初始化的2中方式 1. 给 ScrollView 中加 [
浅谈react native中的ScrollView
小小发的博客
05-08 8154
1、ScrollView介绍（官方解释）：ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动（默认），还能水平滚动（通过horizontal属性来设置）。2、ScrollView常用属性： horizontal（布尔值）：当此属性为true的时候，所有的的子视图会在水平方向上排成一行，而不是默认的在垂直方
React Native中ScrollView性能探究
weixin_33682719的博客
08-03 320
1 基本使用 ScrollView 是 React Native(后面简称：RN) 中最常见的组件之一。理解 ScrollView 的原理，有利于写出高性能的 RN 应用。 ScrollView 的基本使用也非常简单，如下： <ScrollView> <Child1/> <Child2/>...
React native 组件ScrollView的简单使用
afufufufu的博客
08-23 526
这是最常用的三个，当然有很多属性。
React Native：ScrollView与ListView组件用法详解
"React Native中的ScrollView组件和ListView组件是用于构建可滚动内容的两种关键组件。本文将深入探讨它们的功能、用法以及操作注意事项。" React Native提供了多种组件来帮助开发者构建用户界面，其中ScrollView和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值