React-native 使用js编写android和ios程序,前端时间开始支持android,本人根据官方的教程,先安装开发环境,然后运行hello world,最后看了下官方提供的实例程序UIExplorer,感觉还不错。
 
对android相对熟悉一点,首先关注android部分,android使用grader编译,可以导入工程到android studio或者idea中,也可以使用命令行编译。在android studio中运行以后可以普通的android程序一样,点运行按钮以后就开始编译,如果电脑上连接好了安卓设备或者模拟器就可以成功运行。(采用命令行有的设备会安装失败需要手动安装)
 
这里运行的是一个loder程序,通过loader程序会加载本地服务器端的js文件,服务器端由note.js提供,使用命令“adb reverse tcp:8081 tcp:8081” 可以将本地端口绑定到设备上,由于本人adb的版本原因 命令执行失败,因此在loader中设置ip地址来访问服务器端,
 
服务器端程序当然要启动才行,运行react-native run-android 启动服务器端和编译安装loader是同时进行的。
另外也可以单独运行服务器端程序,react native start 或者在master目录中运行 ./install/install.sh
 
ios也是采用类似的方式,创建项目后会生成项目文件,导入Xcode直接运行就可以了,运行的时候同样会启动服务端。
 
loader程序一般是固定不变的,修改服务端的js文件,然后再loader上reload就会加载新的js文件,这样对提高开发效率是很有好处的,
编写android的程序,当然是要返回测试的,虽然打包安装的过程都是全自动的,但不停的这样操作是很费时间的,如果机器配置不好每次修改后程序运行都要等一段时间。
 
当然,这样看来也可以对应用进行热更新,就像网站一样,如果更新了服务器端程序,客户访问到的就是修改后的网站。但是代码的加密又会是新的问题。
 
就android而言,loader程序代码,和普通的安卓项目是基本上是一样的,不同的是引入了react-native的lib(核心库),lib已第三方库的形式存在,使用android studio只需要填写lib名称,就会自动下载,从被注释的代码可以看到,也可以从源码引入lib工程,如果源码不满足你的要求就可以直接去修改。
 
loader的作用就是提供js的执行环境,react是将android自带的控件函数之类映射到js中,ios也是采用类似的方式,通过js来调用原有的函数,而不是自己重新实现了一个界面框架。因此android端的demo和ios的是有一些差别的。
 
js的执行环境是采用JavaScriptCore引擎,调试时根据官方的介绍说放在浏览器端执行的,使用V8引擎。
配置开发环境,根据文档需要安装NDK,实际上如果不自己编译react-native的核心库,是不需要NDK的,应用程序一般直接引入lib就可以了。
 
理论上运行hello world,只需要loader程序和一个note.js的服务器就可以了,如果做开发还需要loader的源代码以增加原生的扩展,调试的话,react-native提供了谷歌浏览器的插件来调试。
 
官方的文档目前是苹果系统下进行的,如果要开发ios的应用是必须使用苹果系统的,没有Xcode ios的loader无法编译。
 
不过,如果只想看看android的效果,使用windows应该也是可以的。理论上只需要装上note.js的服务器环境,并且导入android项目源码就可以了。
 
当然本人并没有测试,准备有时间到windows下试试,到时候再发文章吧,敬请期待.....
 
更多精彩内容,请关注微信公众号:zhaojieTec
 

React-Native测试报告的更多相关文章

  1. 30天React Native从零到IOS/Android双平台发布总结

    前言 本人有近十年的技术背景,除了APP开发之外对后端.前端等都比较熟悉,近期做一个APP项目需要IOS.Android两个平台都需要,只能硬着头皮上.其实很早就想开发APP也很早就接触Android ...

  2. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  4. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  5. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  6. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  7. React Native组件介绍

    1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...

  8. React Native图片控件的使用

    首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...

  9. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  10. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

随机推荐

  1. HTML5开发IDE介绍

    开发html5的工具可供选择的有:Intellij Idea.Eclipse.WebStorm三个软件.在PC端与手机端,同步测试HTML5网页.测试发布软件:FileZilla JavaScript ...

  2. Java反编译插件JODE介绍

    编程入门级博客:(大牛请直接忽略) 1.编程没有捷径,只有多谢代码.手动敲代码,才是最好的学习方法.写给自己!(配置Eclipse General选项:Appearance:Code Assist:) ...

  3. Spark集群 + Akka + Kafka + Scala 开发(1) : 配置开发环境

    目标 配置一个spark standalone集群 + akka + kafka + scala的开发环境. 创建一个基于spark的scala工程,并在spark standalone的集群环境中运 ...

  4. python日志模块---logging

    1.将日志打印到屏幕 import logging logging.debug('This is debug message---by liu-ke') logging.info('This is i ...

  5. C# 7个读写Excel文件的类库

    转载自:http://www.cnblogs.com/wintersun/archive/2013/02/26/2933294.html 有时我们在项目需要操作Excel文件,读或写,导出数据等.   ...

  6. css3中的前缀

    css3中: -o-:opera -moz:firefox -webkit:safari chrome -ms:IE9

  7. 太可爱了!CSS3 & SVG 制作的米老鼠钟表

    米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...

  8. 从0开始学angularjs-笔记04

    由于公司加班,刚到家不久,然而却毫无睡意,可能是老了吧--- 不废话了,没睡意那就做点有意义的事情吧,继续我们的angular学习之路,深夜博文,希望能造福大家! 这次我们来详细讲解angular的双 ...

  9. ABAP中的数据校验-备注

    通过 function module 检查日期是否合法(DDUT_INPUT_CHECK的校验会根据账户的时间设置格式)     日期校验方式一: CALL FUNCTION ‘DATE_CHECK_ ...

  10. SharePoint 2013 配置基于表单的身份认证

    前 言 这里简单介绍一下为SharePoint 2013 配置基于表单的身份认证,简单的说,就是用Net提供的工具创建数据库,然后配置SharePoint 管理中心.STS服务.Web应用程序的三处w ...