杰瑞教育

最新动态NEWS
您当前的位置:首页 > 最新动态

使用前沿的JAVASCRIPT为IOS、ANDROID编写跨平台原生APP

| 查看次数:1015次

       作为一名原生iOS开发者,最近一直在考虑如何更稳定,更高效,更流畅的来跨平台。之前公司使用过cordova搞过一段时间,但是始终感觉效果不够理想,包括页面布局以及系统的流畅度等等。最近一直在研究Facebook推出来的一款工具React Native,用完之后感觉真的很优秀。

Facebook团队凭着对前端技术的深刻了解,让网页版的混合开发主流变为js主流,通过js生成对应的Native。相信不久的将来Native code真的可能要退居二线了。下面跟大家分享下RN的使用心得。

 

1 http://reactnative.cn/ 官网文档网址,一般是2个周左右更新一个版本,为高效工作人员点赞。

 

2 我们谈谈开发效率问题:

   从开始采用RN开发之后,我们的APP开发周期明显的加快。前期一直处于摸索阶段,后面慢慢成熟了,我们将RN封装成一个独立的前端框架,每次开发的时候直接套入即可。大大节省了开发时间

   另外JSX的使用,使页面的布局更加的迅速。之前的iOS的自动布局,完全可以使用Flexbox来实现。领完Flux设计模式更是让iOSWeb应用共享了storeaction绝大部分的代码,真实太给力啦。

 

3我们来谈谈性能吧:

   React Native把「DOM Representation」的概念外扩成了「UI Representation」,由于不是操作真实 UI,就可以放到非 UI 线程来进行 render——所有做客户端 UI 开发的都应该知道 UI 线程是比较头疼的问题,无论怎么 render,这些 render 都不会直接影响 UI,而要借由 React Native 来回到主线程来改变。React Native相比于Objective-CSwift编写的原生iOS应用来说有一些性能差异。但是工作人员们是在努力的更新的,问题会得到解决的,我们期待着吧。

 

由于中间件的机制,React 很有可能成为一个跨平台的统一 UI 解决方案。
 
4 接下来我们来创建第一个React Native的项目吧
  1)安装Homebrew,这是Mac系统的包管理器,主要用来安装NodeJs和一些其他必须的工具软件
指令:/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 
2)使用Homebrew来安装Node.js.
指令:brew install node
 
    在天朝,安装完node后建议设置npm镜像以加速后面的过程,下面是淘宝的镜像,可能会慢一点,不用着急慢慢等待执行完毕。
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
     
    另外,YarnFacebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。安装指令如下:npm install -g yarn react-native-cli
 
3Facebook推荐使用Watchman来监控文件系统变更,可以有效的提高开发性能,指令如下:

brew install watchman。另外,我们还可以通过brew install flow指令安装Flow工具,这个是Facebook自家的代码规范。当然不影响开发,新手或者没有兴趣的可以直接跳过。

 
 
4)测试安装,打开终端,输入下面指令:

  react-native init RnTest

  cd RnTest

  react-native run-ios

 

执行完后,会自动创建一个RnTest文件夹,文件夹的内容如下:

其中包括了 iOS工程包,和android工程包,我们通过修改 index.ios.js文件,就可以搭建界面啦。

 

下面通过webstorm工具打开index.iOS.js界面,并修改代码如下:

class RnTest extends Component {

  render() {

    return (<Text style={styles.color}>this is my Program</Text>);

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1

  }

  ,

  color:{

 

    fontSize:30,

    color:"red",

    marginTop:30

  }

});

 

重新运行会出现以下界面

杰瑞教育旗下:SAP 新版官网 营业执照

捷瑞数字 版权所有Copyright © 2014 All rights reserved [鲁ICP备09041295号] 管理员登陆

培训课程
JAVA专区
ANDROID专区
IOS专区
动画设计专区
就业播报
就业进行时
合作企业
学员风采
精彩活动
成长故事
话题分享
我的团队
技术分享
面试题分享
UI
JAVA
ANDROID
IOS
HTML5
源码分享
首页
免费视频
关于我们
常见问题
联系我们