一篇文章部署ReactNative

最新推荐文章于 2024-10-05 17:21:20 发布

写代码的日子里

最新推荐文章于 2024-10-05 17:21:20 发布

阅读量742

点赞数

分类专栏： ReactNative js 文章标签： android 混合开发 ReactNative 环境搭建

本文链接：https://blog.youkuaiyun.com/qq_35703234/article/details/78023181

版权

js 同时被 2 个专栏收录

4 篇文章

订阅专栏

ReactNative

1 篇文章

订阅专栏

刚进入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.安装jdk

2.安装sdk
 
 在墙的环境下，为了速度我选择了使用http://androiddevtools.cn/

3.安装C++环境

择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

4.安装Node.js与Git

Node.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.org

npm config set disturl https://npm.taobao.org/dist

5.安装React Native命令行工具

github下载

npm install -g react-native-cli

6.创建项目

react-native init DongFang

7.运行packager  进入工程目录

react-native start

可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本

8.准备模拟器或真机 运行android

react-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:8081

9.调试app
  菜单  reload js

当然你还可参考这篇官方的环境搭建文档： http://reactnative.cn/docs/0.48/getting-started.html

后面还对更新响应的组件和简单的项目