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

大家好，我是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',height:45}}/> <Text style={styles.top_text}> 附近 </Text> </View> <View style={styles.vertical_view}> <Image source={require('./img/iei.png')} style={{alignSelf:'center',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',height:30}}/> <Text style={styles.rectangle_text} > 火车票 </Text> </View> <Image source={require('./img/ppe.png')} style={{alignSelf:'center',alignItems: 'center'}}> <Image source={require('./img/nrz.png')} style={{alignSelf:'center',height:30}}/> <Text style={styles.rectangle_text} > 视频 </Text> </View> <Image source={require('./img/ppe.png')} style={{alignSelf:'center',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',backgroundColor:'white',vertical_view:{ justifyContent: 'center',paddingBottom:15,top_text:{ marginTop:5,color:'black',fontSize:16,rectangle_view:{ paddingTop:8,paddingBottom:8,paddingLeft:15,paddingRight:15,justifyContent: 'space-between',borderBottomColor:'#dedfe0',borderBottomWidth:1,rectangle_text:{ color:'black',textAlign:'center',paddingLeft:8,button: { margin: 7,padding: 5,backgroundColor: '#eaeaea',borderRadius: 3,}); AppRegistry.registerComponent('ImageDemo',() => ImageDemo);

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

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

原文链接：https://www.f2er.com/react/305075.html