【React Native 安卓开发】----（View实战之仿携程）【第三篇】
【React Native 安卓开发】----（View实战之仿携程）【第三篇】
先知先觉
发布于 2019-01-21 11:27:38
发布于 2019-01-21 11:27:38
这里讲一下RN中的View组件： 先看一下效果
这里写图片描述
下面是代码，可以直接copy：
后面会给大家一步一步讲解过程，与大家共同成长
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
ScrollView,
ListView,
PixelRatio
} from 'react-native';
class hello extends Component{
render(){
return(
<View style = {styles.flex}>
<View style = {styles.container}>
<View style = {[styles.item,styles.center]}>
<Text style={styles.font}>酒店</Text>
</View>
<View style = {[styles.item,styles.lineLeft]}>
<View style = {[styles.item_inner,styles.center,styles.lineBottom]}>
<Text style={styles.font}>机票</Text>
</View>
<View style = {[styles.item_inner,styles.center]}>
<Text style={styles.font}>火车票</Text>
</View>
</View>
<View style = {[styles.item,styles.lineLeft]}>
<View style = {[styles.item_inner,styles.center,styles.lineBottom]}>
<Text style={styles.font}>旅游</Text>
</View>
<View style = {[styles.item_inner,styles.center]}>
<Text style={styles.font}>攻略</Text>
</View>
</View>
</View>
</View>
);
}
};
const styles = StyleSheet.create({
container:{
marginTop:200,
marginLeft:5,
marginRight:5,
flexDirection:'row',
padding:2,
borderRadius:5,
height:84,
backgroundColor : '#ff0067'
},
item:{
flex:1,
height:80,
},
item_inner:{
flex:1,
height:40,
},
center:{
justifyContent:'center',
alignItems:'center'
},
flex:{
flex :1
},
font:{
color:'#ffffff',
fontSize:16,
fontWeight:'bold'
},
lineBottom:{
borderBottomWidth:1/PixelRatio.get(),
borderColor:'#ffffff'
},
lineLeft:{
borderLeftWidth:1/PixelRatio.get(),
borderColor:'#ffffff'
}
});
AppRegistry.registerComponent('hello', () => hello);下面让我们一步一步来分解：
第一步
如图：我们可以想到先做三个View 这三个View使用FlexBox平分，flex都为1，这里的flex其实就相当于安卓里面的weight权重的概念。
这里写图片描述
class hello extends Component{
render(){
return(
<View style = {{backgroundColor : '#ffffff'}}>
<View style = {{backgroundColor : '#ff0067',height:80,flexDirection:'row'}}>
<View style = {{flex:1,backgroundColor : '#ff00ff'}}>
</View>
<View style = {{flex:1,backgroundColor : '#ffff00'}}>
</View>
<View style = {{flex:1,backgroundColor : '#00ffff'}}>
</View>
</View>
</View>
);
}
};第二步
我们可以考虑到后面两个View里面也是flexBox，flexDirection为默认column.
这里写图片描述
class hello extends Component{
render(){
return(
<View style = {{backgroundColor : '#ffffff'}}>
<View style = {{backgroundColor : '#ff0067',height:80,flexDirection:'row'}}>
<View style = {{flex:1,backgroundColor : '#ff00ff'}}>
</View>
<View style = {{flex:1,backgroundColor : '#ffff00'}}>
<View style = {{flex:1,backgroundColor : '#0f11ff'}}>
</View>
<View style = {{flex:1,backgroundColor : '#02f3ff'}}>
</View>
</View>
<View style = {{flex:1,backgroundColor : '#00ffff'}}>
<View style = {{flex:1,backgroundColor : '#ff110f'}}>
</View>
<View style = {{flex:1,backgroundColor : '#f2f300'}}>
</View>
</View>
</View>
</View>
);
}
};第三步
添加文字进去
这里写图片描述
class hello extends Component{
render(){
return(
<View style = {{backgroundColor : '#ffffff'}}>
<View style = {{backgroundColor : '#ff0067',height:80,flexDirection:'row'}}>
<View style = {{flex:1,backgroundColor : '#ff00ff',justifyContent:'center',alignItems:'center'}}>
<Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>11111</Text>
</View>
<View style = {{flex:1,backgroundColor : '#ffff00'}}>
<View style = {{flex:1,backgroundColor : '#0f11ff',justifyContent:'center',alignItems:'center'}}>
<Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>22222</Text>
</View>
<View style = {{flex:1,backgroundColor : '#02f3ff',justifyContent:'center',alignItems:'center',justifyContent:'center',alignItems:'center'}}>
<Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>33333</Text>
</View>
</View>
<View style = {{flex:1,backgroundColor : '#00ffff'}}>
<View style = {{flex:1,backgroundColor : '#ff110f',justifyContent:'center',alignItems:'center'}}>
<Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>44444</Text>
</View>
<View style = {{flex:1,backgroundColor : '#f2f300',justifyContent:'center',alignItems:'center'}}>
<Text style ={{color:'#ffffff',fontSize:16,fontWeight:'bold'}}>55555</Text>
</View>
</View>
</View>
</View>
);
}
};现在代码看起来有点乱 不过基本效果有了 ，接下来我们把style提取出来，然后再加上一些处理就可以得到我们文章开头看到的效果了。是不是很酷炫。
这里在样式中用到了PixelRatio。 这个就是获取屏幕的设备像素比。window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是：window.devicePixelRatio = 物理像素 / dips
dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。
说道dp，安卓同学都应该很熟悉才对，这里就不过多介绍了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016年12月16日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录