一篇文章部署ReactNative
来源:互联网 发布:什么叫手游数据 编辑:程序博客网 时间:2024/06/05 15:35
刚进入android领域时,一直在思考能不能学一门语言,就可以运行在多个平台上,来减轻公司开发所带来的成本压力:哪怕代码能复用也好哪!之前学习了hybirdApp 开发,就是H5+原生,但是感觉性能不怎么样!后来就学习了MUI前段移动框架,可是bug太多!最近感觉ReactNative 一直成为技术论坛里讨论的热点!自己也抽时间加入了ReactNative学习的大军:那么什么是ReactNative呢!
官方说
原生的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
- 一篇文章部署ReactNative
- ReactNative性能相关文章
- 一篇文章
- 文章上一篇,下一篇
- 使用codepush进行ReactNative热部署
- 【转】使用codepush进行ReactNative热部署
- 使用codepush进行ReactNative热部署
- 上一篇文章、下一篇文章实现
- 推荐一篇文章
- 推荐一篇文章
- 推荐一篇文章
- 一篇grub的文章-
- 第一篇blog文章
- 评论一篇搞笑文章
- 今天看到一篇文章
- 转载一篇文章
- 一篇感人的文章
- 摘录文章一篇
- 1008. 卡片游戏
- 浅谈访问控制(1)--概述
- Spring依赖注入的3种实现方式
- 机器学习之- 推荐系统
- 二叉树-层级遍历
- 一篇文章部署ReactNative
- solr的简单配置使用
- 【Android】SeekBar禁止滑动
- HDU6216 A Cubic number and A Cubic Number【思路】
- java基本数据类型
- android小问题
- Java Collections工具类
- 95. Unique Binary Search Trees II
- linux查看文件在磁盘中是否连续的block