http://godcoder.me/categories/技术博客/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 colorborderLeftWidth number 同理borderRadius number 四周圆角大小borderRightColor colorborderRightWidth numberborderStyle （[’solid’, ‘dotted’, ‘dashed’]) 边框的样式，是实现，还是点，还是虚线borderTopColor colorborderTopLeftRadius numberborderTopRightRadius numberborderTopWidth numberborderWidth 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就讲完了，由于非常简单，大家赶紧去练练手吧！不懂的可以在下面留言，由于我也是第一次学，欢迎大家提出不足，一起交流学习。
转载请注明原文地址: https://ju.6miu.com/read-21067.html
