一篇文章部署ReactNative

来源:互联网 发布:什么叫手游数据 编辑:程序博客网 时间:2024/06/05 15:35

    刚进入android领域时,一直在思考能不能学一门语言,就可以运行在多个平台上,来减轻公司开发所带来的成本压力:哪怕代码能复用也好哪!之前学习了hybirdApp 开发,就是H5+原生,但是感觉性能不怎么样!后来就学习了MUI前段移动框架,可是bug太多!最近感觉ReactNative 一直成为技术论坛里讨论的热点!自己也抽时间加入了ReactNative学习的大军:那么什么是ReactNative呢!

    官方说

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的UI框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。[1-2] 
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。
React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)
Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。
React Native主要特性如下:
  • 原生的iOS组件
    React Native主张“Learn once, write everywhere”而非其他跨平台工具一直宣扬的“Write once, run everywhere”。通过React Native,开发者可以使用UITabBar、UINavigationController等标准的iOS平台组件,让应用界面在其他平台上亦能保持始终如一的外观、风格。
    异步执行
    JavaScript应用代码和原生平台之间所有的操作都采用异步执行模式,原生模块使用额外线程,开发者可以解码主线程图像、后台保存至磁盘、无须顾忌UI等诸多因素直接度量文本设计布局。
    触摸处理
    React Native引入了一个类似于iOS上Responder Chain响应链事件处理机制的响应体系,并基于此为开发者提供了诸如TouchableHighlight等更高级的组件。
    看了之后发现太强大了,通过JS条用原生代码!达到类原生的性能。当然与原生性能还是差一点,毕竟有中间件的存在:

下面我们来了解一下运行的原理:

下面是引用简书中的一段加以说明

React Native 不是黑科技,我们写的代码总是以一种非常合理,可以解释的方式的运行着,只是绝大多数人没有理解而已。接下来我以 iOS 平台为例,简单的解释一下 React Native 的原理。

首先要明白的一点是,即使使用了 React Native,我们依然需要 UIKit 等框架,调用的是 Objective-C 代码。总之,JavaScript 只是辅助,它只是提供了配置信息和逻辑的处理结果。React Native 与 Hybrid完全没有关系,它只不过是以 JavaScript 的形式告诉 Objective-C或者java 该执行什么代码。

其次,React Native 能够运行起来,全靠 Objective-C 和 JavaScript 的交互。对于没有接触过 JavaScript 的人来说,非常有必要理解 JavaScript 代码如何被执行。

我们知道 C 系列的语言,经过编译,链接等操作后,会得到一个二进制格式的可执行文,所谓的运行程序,其实是运行这个二进制程序。

而 JavaScript 是一种脚本语言,它不会经过编译、链接等操作,而是在运行时才动态的进行词法、语法分析,生成抽象语法树(AST)和字节码,然后由解释器负责执行或者使用 JIT 将字节码转化为机器码再执行。整个流程由 JavaScript 引擎负责完成。

苹果提供了一个叫做 JavaScript Core 的框架,这是一个 JavaScript 引擎。通过下面这段代码可以简单的感受一下 Objective-C 如何调用 JavaScript 代码:

JSContext *context = [[JSContext alloc] init];JSValue *jsVal = [context evaluateScript:@"21+7"];int iVal = [jsVal toInt32];

这里的 JSContext 指的是 JavaScript 代码的运行环境,通过 evaluateScript 即可执行 JavaScript 代码并获取返回结果。

JavaScript 是一种单线程的语言,它不具备自运行的能力,因此总是被动调用。很多介绍 React Native 的文章都会提到 “JavaScript 线程” 的概念,实际上,它表示的是 Objective-C 创建了一个单独的线程,这个线程只用于执行 JavaScript 代码,而且 JavaScript 代码只会在这个线程中执行。

小编之前是做android开发的,在这里及以android为例进行环境的配置:

在Windows下搭建React Native Android开发环境

在Windows下搭建React Native Android开发环境1.安装jdk2.安装sdk  在墙的环境下,为了速度我选择了使用http://androiddevtools.cn/3.安装C++环境择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。4.安装Node.js与GitNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统 [点击下载msysgit](https://git-for-windows.github.io/)建议设置npm镜像以加速后面的过程(或使用科学上网工具)。设置全局使用指定的镜像npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist5.安装React Native命令行工具github下载npm install -g react-native-cli6.创建项目react-native init DongFang7.运行packager  进入工程目录react-native start可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本8.准备模拟器或真机 运行androidreact-native run-android问题:找不到sdk  或者 无法正常化 sdk路径  解决办法:环境变量问题:failed to find target with hash string 'android-23' in: F:\Android_SDK    解决版本:更新23版本的sdk问题:build成功后是红色的:没有连接服务器js Server解决方法:ip地址+8081端口  例子:192.168.1.100:80819.调试app  菜单  reload js
当然你还可参考这篇官方的环境搭建文档:http://reactnative.cn/docs/0.48/getting-started.html
后面还对更新响应的组件和简单的项目