【React Native 安卓开发】----（View实战之仿携程）【第三篇】

这里讲一下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，安卓同学都应该很熟悉才对，这里就不过多介绍了。

扫码关注公众号“伟大程序猿的诞生“，更多干货新鲜文章等着你～

公众号回复“资料获取”，获取更多干货哦～

有问题添加本人微信号“fenghuokeji996” 或扫描博客导航栏本人二维码

【React Native 安卓开发】----（View实战之仿携程）【第三篇】相关推荐

React Native 移动开发入门与实战
课程简介本课程主要讲解 React 的基础知识及应用案例,包括 props.state.生命周期函数等,样式和 Flex 布局,React Native 内置的 API 和 UI 组件介绍.路由.状 ...
React Native移动开发实战-4-Android平台的适配
打开Android开发工具Android Studio,选择菜单 Open an existing AndroidStudio project,打开ch04项目的android文件夹,如图5.8所示. ...
《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
【苹果家庭推iiMessage】React Native举行开发仍是iOS，用原生的代码实现类似webview的页面
推荐内容IMESSGAE相关作者推荐内容 iMessage苹果推软件 *** 点击即可查看作者要求内容信息作者推荐内容 1.家庭推内容 *** 点击即可查看作者要求内容信息作者推荐内容 2.相册 ...
《React Native 精解与实战》已发售，附 80 集配套免费视频教程
<React Native 精解与实战>是我撰写并由机械工业出版社出版的 React Native 实战书籍,书中讲解了 React Native 框架底层原理.React Native ...
React Native组件开发指南
React Native的组件开发一直处在一个比较尴尬的处境.在官方未给予相关示例与脚手架的情况下,社区中依然诞生了许许多多的React Native组件.因为缺少示例与规范,很多组件库仅含有一个in ...
react native 安卓（特别是小米手机）全面屏是否开虚拟按键的适配
react native 安卓(特别是小米手机)全面屏是否开虚拟按键的适配做rn蛮久了,遇到的坑无数,谢谢大家带我爬过的坑,这次我也来分享一下,希望帮助到有需要的人! 大家先看先后效果对比: 没开虚 ...
android 网络时区错误,React native 安卓机器上调试代码报错：网络请求出错TypeError: Network request failed...
React native 安卓机器上调试代码报错:网络请求出错TypeError: Network request failed 安卓机器 usb连接调试报错信息 TypeError: Networ ...
Android之Windows下搭建React Native Android开发环境（差不多搞了一天）
Android之Windows下搭建React Native Android开发环境穷逼买不起mac,但是他们都说React Native Android只能在mac下面 ...
React Native 一:开发环境搭建
在学习React Native的过程中,相信对于一个App开发工程师,没有充分的学习过前端开发技术的同学来说,顺利的搭建好开发环境还是比较纠结的. 下面,我就根据我自己学习过程中的总结,跟大家讲解讲解 ...

【React Native 安卓开发】----（View实战之仿携程）【第三篇】

【React Native 安卓开发】----（View实战之仿携程）【第三篇】相关推荐

最新文章

热门文章