React-Native入门指南(三)

今天为大家更新React-Native入门指南(三),纯干货,请偷偷观看哦!

五、React-Native布局实战(二)

在不断深入的过程中,发现React-Native布局和样式的坑还有很多,他没有像浏览器那样灵活和有规律可循,其中的规律需要我自己踩坑的时候发现。比如:不存在zIndex,后面的元素覆盖前面的元素;内层元素覆盖外层元素等等,borderRadius的设置,需要考虑到内层元素的位置等等。

1、实战的内容

这里选用携程的App首页作为栗子,随不是严格的9宫格(比9宫格稍微难点...),但是可以很好的让我们练习flexbox.最后需要完成的结果如下:

2、分解内容

整个页面我们可以分为几个部分,大致如下:

  • 头部
  • 图片轮播
  • 9宫格
  • 底部活动

3、头部导航栏

因为,组件还没有讲,这里只是做一个简单的介绍。在React-Native中实现头部导航栏很简单,只要使用NavigatorIOS组件即可。现在开工。 (1)我们在index.ios.js中添加如下代码;同时创建文件夹pagaes和pages下创建Index.js

var React = require('react-native'); var Index = require('./pages/Index'); var { NavigatorIOS, AppRegistry, StyleSheet, } = React; var NV = React.createClass({ render: function(){ return( <NavigatorIOS style={styles.container} initialRoute={{ title: '首页', component: Index, }} /> ); } });

var styles = StyleSheet.create({ container: { flex: 1, } }); AppRegistry.registerComponent('HelloWorld', () => NV); 分析代码: 1)require:引入外部模块,就像,引入我们自己创建的/pages/Index.js一样。 2)引入定义NavigatorIOS、AppRegistry、StyleSheet组件和类。 3)在render中调用NavigatorIOS组件,initialRoute是初始化路由,title是当前页面的头部标题;component是当前路由下显示的组件; 4)注意:这里NavigatorIOS的style需要设置大小,比如这里设置是flex:1,否则就不能显示内容主体; 5)最后我们需要注册当前应用:AppRegistry.registerComponent('HelloWorld', () => NV); (2)创建Index.js文件,文件的内容如下, module.exports就暴露了Index模块。

效果如下图:

4、图片轮播

这里图片轮播使用的是第三方组件react-native-swiper,当然React-Native是支持transform可以直接实现一套。

(1)我们启动npm命令行,在项目的根目录使用如下命令安装模块。

$ npm install react-native-swiper --save $ npm i react-timer-mixin --save

(2)需要关闭React packager命令行和模拟器,在xcode中重启项目

安装完成后,我们需要完成轮播功能。因为可以到github看看swiper暴露的接口和参数。github地址是:

https://github.com/leecade/react-native-swiper 1)引入swiper,前面也提到了require. var Swiper = require('react-native-swiper'); 2)使用swiper,将轮播图封装成单独的组件 var sliderImgs = [ 'http://images3.c-ctrip.com/SBU/apph5/201505/16/app_home_ad16_640_128.png', 'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png', 'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg' ]; var Slider = React.createClass({ render: function(){ return ( <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} height={150} showsPagination={false}> <Image style={[styles.slide,]} source={{uri: sliderImgs[0]}}></Image> <Image style={[styles.slide,]} source={{uri: sliderImgs[1]}}></Image> <Image style={[styles.slide,]} source={{uri: sliderImgs[2]}}></Image> </Swiper> ); } }); 3)这样我们可以直接在render的时候直接用:<Slider/>

5、完成第一个9宫格布局,后面复制拷贝

其实4个九宫格都是一样,这个其实可以封装成组件,这里采用拷贝的形式,开发一个,其他3个就ok的,不会偷懒的工程师,不是好工程师[偷笑]。分析下布局:

(1)其实首先是3个列在一行的布局,那么外层组件是需要flexDirection: 'row',各占据宽度的1/3,即各自flex:1; (2)每个列内又分两行, 需要每个行都是flex:1,各占据高度的一半; (3)第一列是文字图片组合,其余都是文字组合; (4)所有行内元素都是水平、垂直居中; (5)这里使用了个TouchableHighlight组件,是为了出发onPress事件,类似于click或者touch事件。 <View style={[styles.sbu_red, styles.sbu_view]}> <TouchableHighlight underlayColor={'#FA6778'} style={{flex:1}}> <View style={[styles.sbu_flex, styles.sbu_borderRight]}> <View style={[styles.sub_con_flex, styles.sub_text]}> <Text style={[styles.font16]}>酒店</Text> </View> <View style={[styles.sub_con_flex]}> <Image style={[styles.sbu_icon_img]} source={{uri:BUIcon[0]}}></Image> </View> </View> </TouchableHighlight> <View style={[styles.sbu_flex, styles.sbu_borderRight]}> <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}> <Text style={[styles.font16]}>海外</Text> </View> <View style={[styles.sub_con_flex, styles.sub_text]}> <Text style={[styles.font16]}>周边</Text> </View> </View>

<View style={[styles.sbu_flex]}> <View style={[styles.sub_con_flex, styles.sub_text, styles.sbu_borderBottom]}> <Text style={[styles.font16]}>团购.特惠</Text> </View> <View style={[styles.sub_con_flex, styles.sub_text]}> <Text style={[styles.font16]}>客栈.公寓</Text> </View> </View> </View>

6、样式类

说完了布局的原理,这里需要贴上样式仅供参考:

var styles = StyleSheet.create({ //container container:{ backgroundColor:'#F2F2F2', flex:1, }, //slider wrapper: { height:80, }, slide: { height:80, resizeMode: Image.resizeMode.contain, }, //sbu sbu_view:{ height:84, marginLeft: 5, marginRight:5, borderWidth:1, borderRadius:5, marginBottom:10, flexDirection:'row', },

sbu_red:{ backgroundColor: '#FA6778', borderColor:'#FA6778', marginTop:-70, }, sbu_blue:{ backgroundColor: '#3D98FF', borderColor:'#3D98FF', }, sbu_green:{ backgroundColor: '#5EBE00', borderColor:'#5EBE00', }, sbu_yellow:{ backgroundColor: '#FC9720', borderColor:'#FC9720', }, sbu_flex:{ flex:1, },

sbu_borderRight:{ borderColor:'#fff', borderRightWidth: 0.5, }, sbu_icon_img:{ height:40, width:40, resizeMode:Image.resizeMode.contain, }, sub_con_flex:{ flex:1, justifyContent: 'center', alignItems: 'center', }, sub_text:{ justifyContent:'center', }, font16:{ fontSize:17, color:'#FFF', fontWeight:'900', }, sbu_borderBottom:{ borderBottomWidth:0.5, borderBottomColor:'#fff', },

img_view:{ height:62, marginLeft:5, marginRight:5, flexDirection: 'row', marginBottom:20, backgroundColor:'#fff', }, img_flex:{ flex:1, borderWidth:1, borderColor:'#ccc', }, img_wh: { height:59, borderRightWidth:0, resizeMode:Image.resizeMode.contain, } });

宽度或者高度而自适应大小的,因此我们需要让图片根据宽度或者高度来自适应,那么可以使用resizeMode:Image.resizeMode.contain。facebook提示错误信息的样式表中也没有提及,文档中也没有提及。所以后续还有不少的坑需要大家去一起探索。

7、Index.js整个代码,仅供参考

实例代码中会涉及ScrollView组件,主要是为了适应小屏的机器,可以滚动视图。

具体代码可参考https://github.com/vczero/react-native-lesson

本文转载自github大咖个人博客,原作者授权发布

原作者:vczero

转自:https://github.com/vczero/react-native-lesson

那么多代码,是不是看着很枯燥呢?

本文分享自微信公众号 - 京程一灯(jingchengyideng)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-11-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JavaEdge

Spring Boot 配置接口 WebMvcConfigurer

WebMvcConfigurer配置类其实是Spring内部的一种配置方式,采用JavaBean的形式来代替传统的xml配置文件形式进行针对框架个性化定制 基...

2.1K50
来自专栏码匠的流水账

聊聊flink的slot.idle.timeout配置

flink-release-1.7.2/flink-core/src/main/java/org/apache/flink/configuration/JobM...

20230
来自专栏dotNET匠人的技术自留地

Chorme浏览器渲染MathJax时出现竖线的解决方法

新版的Chorme浏览器在解析css时,会对其中的值进行向上取整(四舍五入),而其他浏览器不会,且Chrome较旧版本(比如Chrome 40 稳定版)也是不会...

12420
来自专栏华来四Azure混合云

在Azure Stack上部署Kubernetes

要参加微信课堂以及日常技术交流,请给我们发微信(微信号:markpah),请注明加入以下哪个群:

13720
来自专栏dotNET匠人的技术自留地

Dreamweaver PHP 图片上传:

在 Dreamweaver 中,上传图片到数据可以比较容易的实现,但是上传到一个目录,需要借助于 PHP 代码来实现。我的学生大多没有 PHP 的编程经验,所以...

38820
来自专栏dotNET匠人的技术自留地

解除谷歌浏览器Chrome无法安装扩展插件的限制

今天将谷歌浏览器升级到了最新版本,在安装扩展脚本的时候,却发现Chrome 21+系列增加了对扩展插件安装的限制, 用户只能安装谷歌浏览器(Chrome Sto...

20920
来自专栏娱乐心理测试

Expected indentation of 10 spaces but found 20

遇到过两次这个问题,第一次是用vue做商城时,第二次是做mpvue项目时,这是因为安装vue-cli时,直接安装了ESLint。

26730
来自专栏清晨我上码

第十八节 netty源码分析之 pipleline和handler以及pipeline的数据流向02

下面是AbstractNioChannel的fulfillConnectPromise具体如下,

11130
来自专栏dotNET匠人的技术自留地

ASCIIMathML技术简介~

ASCIIMathML.js是一种将ASCII符号翻译成直观的MathML(HTML版本)的开源JavaScript脚本。

11840
来自专栏Fundebug

详解Vue Native

译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。

12520

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励