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>
);
}
具体的样式见源代码。
原文链接：https://www.f2er.com/react/306589.html