React Native布局学习,模仿携程的首页内容,可以很好的让我们练习一下flexBox布局,最后完成的效果图如下:
一、布局主要内容如下:
1、搜索栏的布局
2、图片轮播
3、类似九宫格的布局
4、图片、文字混合布局
5、底部布局
主要使用的控件
StyleSheet
Text
PixelRatio
ScrollView
Image
View
TextInput
记得导出与引用
导出单独的样式
module.exports= Search;
在主文件中使用
const Search = require('./search');
二、搜索栏布局实现
class Search extends Component { render() { return ( <View style={styles.sub_searchView}> <View style={styles.searchBarView}> <Image source={require('./imgs/search_icon.png')} style={{height:18,width:18,alignSelf:'center',marginLeft:5} } /> <TextInput autoCapitalize="none" autoCorrect={false} placeholder="搜索:目的地/景点/酒店/关键字/航班号" style={styles.searchBarInput} /> <Image source={require('./imgs/voice_icon.png')} style={{height:18,marginLeft:0} } /> </View> <View style={styles.messageView}> <Image source={require('./imgs/message_icon.png')} style={{height:22,width:22} } /> </View> </View> ); }
具体的样式见源代码。
三、图片轮播
这里使用了开源的组件react-native-swiper
Github项目地址,里面有具体的使用介绍
记得安装完后,重新启动一下package,不然会报错
下面是安装的代码,具体见Github
$ npm i react-native-swiper --save
<Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={80} activeDot = {<View style={{backgroundColor:'#1EA0DB',width: 8,height: 8,borderRadius: 4,marginLeft: 3,marginRight: 3,marginTop: 3,marginBottom: 3,}} />} scrollsToTop={true} > <Image style={[styles.slideView,]} source={{uri:slideImages[0]}}/> <Image style={[styles.slideView,]} source={{uri:slideImages[1]}}/> <Image style={[styles.slideView,]} source={{uri:slideImages[2]}}/> <Image style={[styles.slideView,]} source={{uri:slideImages[3]}}/> <Image style={[styles.slideView,]} source={{uri:slideImages[4]}}/> </Swiper>
具体的样式见源代码。
四、类似九宫格的布局
<View style={[styles.sbu_view,styles.sub_red]}> <View style={[styles.item,styles.sub_icon_flex]}> <View style={[styles.sub_icon_flex]}> <Text style={styles.font}>酒店</Text> </View> <View style={[styles.sub_flex,styles.sub_icon_flex]}> <Image source={{uri:Icons[0]}} style={styles.sub_icon_img}></Image> </View> </View> <View style={[styles.item,styles.lineLeftRight]}> <View style={[styles.sub_flex,styles.sub_icon_flex,styles.lineCenter]}> <Text style={styles.font}>海外酒店</Text> </View> <View style={[styles.sub_flex,styles.sub_icon_flex]}> <Text style={styles.font}>特惠酒店</Text> </View> </View> <View style={styles.item}> <View style={[styles.sub_flex,styles.lineCenter]}> <Text style={styles.font}>团购</Text> </View> <View style={[styles.sub_flex,styles.sub_icon_flex]}> <Text style={styles.font}>民宿·客栈</Text> </View> </View> </View>
具体的样式见源代码。
五、图片、文字混合布局
<View style={styles.sub_subject_sup_contentView}> <View style={styles.sub_supImgView}> <Image source={{uri:subject_supImages[0]}} style={styles.sub_subject_sup_img}/> <View style={[styles.color_grey]}> <Text style={styles.sub_sup_fontSize}> 美食之旅·呼和浩特+希拉穆仁草原+响沙湾+鄂尔多斯... </Text> <View style={styles.sub_sup_priceView}> <Text style={styles.sub_price_fontSize}> ¥2899起 </Text> <View style={styles.sub_sup_priceChildView}> <Text style={styles.sub_sup_fontSize}> 省¥1100 </Text> </View> </View> </View> </View> <View style={styles.sub_supImgView}> <View style={[styles.sub_sup_right_top,styles.color_grey,styles.sub_sup_borderBottom]}> <View style={{flex: 2}}> <Text style={[styles.sub_price_fontSize,{marginTop: 10,marginLeft: 5,fontWeight: 'bold',color: '#FA5267'}]}> 千款特价 </Text> <Text style={{fontSize: 12,marginLeft: 5}}> 走过路过不错过 </Text> </View> <View style={[styles.sub_flex]}> <Image source={{uri:subject_supImages[1]}} style={styles.sub_sup_right_img}/> </View> </View> <View style={[styles.sub_sup_right_bottom,styles.color_grey]}> <View style={[styles.sub_flex,styles.sub_sup_borderRight,{alignItems: 'center',justifyContent: 'center'}]}> <Text style={[styles.sub_price_fontSize,color: '#3D98FF'}]}> 海外精选 </Text> <Text style={{fontSize: 12,marginLeft: 5}}> 百元出境游 </Text> <Image source={{uri:subject_supImages[2]}} style={styles.sub_sup_rightBottom_img}/> </View> <View style={[styles.sub_flex,color: '#4FC72F'}]}> 周边玩乐 </Text> <Text style={{fontSize: 12,marginLeft: 5}}> 十元度周末 </Text> <Image source={{uri:subject_supImages[3]}} style={styles.sub_sup_rightBottom_img}/> </View> </View> </View> </View> </View>
具体的样式见源代码。
六、底部布局
class Tab extends Component { render() { return ( <View style={[styles.sub_tab_flex,styles.sub_tab_topLine]}> <View style={styles.sub_tab_icon}> <Image source={require('./imgs/tab_item_01.png')} style={styles.sub_tab_image}/> <Text style={[{color: '#3D98FF'},styles.sub_tab_font]}>首页</Text> </View> <View style={styles.sub_tab_icon}> <Image source={require('./imgs/tab_item_02.png')} style={styles.sub_tab_image}/> <Text style={styles.sub_tab_font}>行程</Text> </View> <View style={styles.sub_tab_icon}> <Image source={require('./imgs/tab_item_03.png')} style={styles.sub_tab_image}/> <Text style={styles.sub_tab_font}>客服</Text> </View> <View style={styles.sub_tab_icon}> <Image source={require('./imgs/tab_item_04.png')} style={styles.sub_tab_image}/> <Text style={styles.sub_tab_font}>我的</Text> </View> </View> ); }
具体的样式见源代码。