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

非著名程序员

发布于 2018-02-09 14:48:45

1.9K0

发布于 2018-02-09 14:48:45

（友情提示：RN学习，从最基础的开始，大家不要嫌弃太基础，会的同学请自行略过，希望不要耽误已经会的同学的宝贵时间）

编者按：其实我并不太喜欢在周末发公众号，毕竟大家都在休息和放松，不想学习，但是今天在群里我看到有人说：这周群主关于React Native的文章发的很少，不够学的，我发的少，是因为我看阅读量少，所以减少了发布次数，但是看到群里的人这么一问，感觉我必须今天再多发一篇。回馈给一直跟着我学习的程序员和开发者。

大家好，我是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>
    );
  }
}




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

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

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2016-10-30，如有侵权请联系 cloudcommunity@tencent.com 删除

机器学习

人工智能

本文分享自非著名程序员微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

机器学习

人工智能

登录后参与评论

0 条评论

热度