您当前的位置:首页 > 新闻资讯 > 产品动态 > 正文

【美高梅游戏技术大咖带您走进React Native】用它就可通吃移动端开发

发布时间: 2016-09-09 11:58:01  
分享到:

 

文/闫立帮 华西研发部

 

 

 

 
 
 
专栏介绍

美高梅游戏自2001年成立以来,掌握大数据、云计算、通信、物联网及区块链等信息技术,拥有一支逾16年经验的强大IT团队。为沉淀企业技术实力,继续发挥行业优势,《澳门美高梅游戏》特邀美高梅游戏技术大咖带您走进这些先进信息技术,揭秘美高梅游戏16年来的技术成果,每周五发布

 

 

 

一、React Native 是什么

 

React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术。用大白话说,就是从此一名程序员只用这一门技术,就可以同时写出 android app,ios app,以及后台应用程序。而app 也能做到向网页程序那样随时都能更新了。是不是很牛逼?是不是很牛逼?是不是很牛逼?重要的事问三遍!嗯,真的很牛逼。

 

那么我们来看看React Native 受到了如此大的关注,它的优越性到底在什么地方呢?React Native整套解决方案完成了江湖统一,FaceBook 也号称这门技术是 “Learn Once,Write AnyWhere”,即学习成本只有一次,却完成了所有开发角色的统一。

 

1.app 将来都是可像网页一样随时更新,随时发布。

 

2.对于一名开发人员,将再也没有前端、终端、后台的区分,他所关注的就是做一整套应用程序,人力资源将得到最大程度的整合与释放。

 

3.代码复用将会是主旋律,因为是一种语言,大家重复造轮子的成本会越来越节省。

 

目前,React Native 也还是有一些缺点的,比如他的 sdk 组件包 size 还比较大,crash 还比较多,在 ios 上支持的内容已经相当不错了,但在android上 支持则还属于初级阶段。不过,这些都只是一个新技术刚刚诞生时存在的普遍性问题,相信随着技术不断地发展与完善,将都不再是问题。

 

二、React Native 的技术优势

 

React Native作为Facebook推出的一个开源框架,实现以JavaScript开发移动应用,具有如下优势:

 

1. JavaScript使用门槛低、普及率高 。

 

2. 使用JavaScript开发,开发成本低:移动端(iOS和Android平台上),由于内置浏览器都采用Webkit内核,因而在使用JavaScript开发时,完全无需考虑浏览器兼容问题,进一步降低了JavaScript的开发成本。

 

3. React Native采用了JSX语法糖工具JSX是一种语法转换工具,能够将XML标签转换为JavaScript代码。这意味着,你可以在JavaScript里像写XML一样去写JavaScript代码,不用手动拼接XML格式的字符串,不用显示地创建标签和执行插入标签操作,而且这样写出来的代码可读性非常强,降低维护成本。 

  

4. 原生UI,UI交互效率高。React Native未采用WEB模式,而是使用JavaScript去开发原生应用。React Native自己实现了一套与原生语言通讯的机制,将JavaScript视为数据源,用原生语言去调用数据源,然后用原生UI来展示,用原生语言来实现事件机制,这样便不再有浏览器单线程、DOM渲染效率低导致的交互体验差的问题。由于JavaScript和原生语言的运行效率很高,因而应用交互体验非常好,堪比原生应用。

 

5. React Ntive与Hybird app、Native APP 的优势对比分析

 

 React Ntive与Hybird app优势对比分析:


1) 不用Webview,彻底摆脱了Webview让人不爽的交互和性能问题


2)有较强的扩展性,这是因为Native端提供的是基本控件,JS可以自由组合使用


3) 可以直接使用Native原生的「牛逼」动画(在FB Group这个app里面,面板滑出带一点果冻弹动,面板基于某个点展开这种动画随处可见,这种动画用Native code来做小菜一碟,但是用Web来做就难上加难)。

 

 优势相对于Native app: 可以通过更新远端JS,直接更新app。

 

三、React Native 的应用实例

 

这里选用携程的App首页作为例子。整个页面我们可以分为头部导航栏、 图片轮播、 9宫格、底部活动几个部分,大致如下:

 

 

1、头部导航栏

 

React-Native中实现头部导航栏很简单,只要使用NavigatorIOS组件即可。现在开工。

 

1、我们在index.ios.js中添加如下代码;同时创建文件夹pagaespages下创建Index.js

var React = require(‘react-native‘);

var Index = require(‘./pages/Index‘);

 

var {

    NavigatorIOS,

    AppRegistry,

    StyleSheet,

} = React;

 

var NV = React.createClass({

    render: function(){

        return(

            

                style={styles.container}

                initialRoute={{

                    title: ‘首页‘,

                    component: Index,

                }}

            />

        );

    }

});

 

var styles = StyleSheet.create({

    container: {

        flex: 1,

    }

});

 

 

AppRegistry.registerComponent(‘HelloWorld‘, () => NV);

 

分析代码:

 1require:引入外部模块,就像,引入我们自己创建的/pages/Index.js一样。

 2)引入定义NavigatorIOSAppRegistryStyleSheet组件和类。

 3)在render中调用NavigatorIOS组件,initialRoute是初始化路由,title是当前页面的头部标题;component是当前路由下显示的组件;

 4)注意:这里NavigatorIOSstyle需要设置大小,比如这里设置是flex1,否则就不能显示内容主体;

 5)最后我们需要注册当前应用:AppRegistry.registerComponent(‘HelloWorld‘, () => NV);

 

 2、创建Index.js文件,文件的内容如下, module.exports就暴露了Index模块。

 

 

效果如下图: 

 

 
    

2、图片轮播

 

这里图片轮播使用的是第三方组件react-native-swiper,当然React-Native是支持transform可以直接实现一套。我们启动npm命令行,在项目的根目录使用如下命令安装模块。

 

$ npm react-native-swiper --save

 

安装完成后,我们需要完成轮播功能。因为可以到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 (

      

        

        

        

      

    );

  }

});

(3)这样我们可以直接在render的时候直接用:

 

3、完成第一个9宫格布局

 

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

1)首先是3个列在一行的布局,那么外层组件是需要flexDirection: ‘row‘,各占据宽度的1/3,即各自flex:1

2)每个列内又分两行, 需要每个行都是flex:1,各占据高度的一半;

3)第一列是文字图片组合,其余都是文字组合;

4)所有行内元素都是水平、垂直居中;

5)这里使用了个TouchableHighlight组件,是为了出发onPress事件,类似于click或者touch事件。

 

        

        

            

                

                    酒店

                

                

                    

                

            

        

        

            

                海外

            

            

                周边

            

        

        

            

                团购.特惠

            

            

                客栈.公寓

            

        

    

 

4、样式类

 

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

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。在React-Native中图片的大小是不会根据给定一个宽度或者高度而自适应大小的,因此我们需要让图片根据宽度或者高度来自适应,那么可以使用resizeMode:Image.resizeMode.contain

 

 

 

分享到:
地址:福建省福州市铜盘路软件大道89号软件园A区26号楼 电话:0591-83519233 传真:0591-87882335 E-mail:doone@amofib.net
版权所有 澳门美高梅游戏官网 闽ICP备07052074号-1