基础篇章:React Native之 ScrollView 的讲解
关于我,我还想说,我这个人身上笑点比较低,随便一触摸就想笑,当然,你们摸我,让我干什么事,我还是很听话的,唯独有一点就是你们别想让我滚,让我滚是有条件的,条件就是必须让我吃饱,吃撑了才可以,这样我才有力气滚动(视图高度一定才可以滚动)。要么设置我的身高是固定的,当然我想长高,所以不建议这么做,要么就是设置我上级的高度,当然要这样做,不要忘了设置flex:1,要不然一样没用。 我的性格来看看我有哪些性格特点,只有知道了我的性格特点,才更能容易了解我,针对我,容易控制我啊,如果你不了解我,就想让我帮你干活?做梦去吧。 我的穿衣打扮来,一起来看看,我有哪些外在的服饰和化妆品,可以使用更佳美观和漂亮,修饰我的内在和外在。 我的秀丽身材闻其声不见其人,光知道我,没见过我岂不是很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就讲完了,由于非常简单,大家赶紧去练练手吧!不懂的可以在下面留言,由于我也是第一次学,欢迎大家提出不足,一起交流学习。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |