在原有Android项目中快速集成反应本地详解

　　介绍

这篇文章给大家分享的是有关在原有Android项目中快速集成反应本地详解的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

<强>前言

RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一:

①做UI快

②还是有很多限制,不如原生原生

③入门简单,能让前端快速开发应用

④iOS& Android大部分代码通用

⑤code-push能做热更新,但是用不好依旧坑

……

在得到一些信息后,可以看的出,要用RN高效率的做出比较不错的应用是有可能的,单看投入度与最初设计是否合理,而且现在关于反应本地的各种文档是相当丰富的,所以这个阶段想切入RN可能是一个不错的选择。

众所周知对于现有的大多数项目来说都不是从头构建的,而要在原有项目的基础上引入本机反应则肯定和用react-native init xxx创建工程不同,因此下面就来说下具体操作,不过在真正开始之前还是要先说明一下工具配置。

<李>

NodeJS:选择对应的系统下载并安装,安装完即可在终端运行npm命令。

<李>

配置源,众所周知因为墙的原因,所以最好配置国内的源。

配置方法如下:

npm  config  set  registry  https://registry.npm.taobao.org ——全球 　　npm  config  set  disturl  https://npm.taobao.org/dist 全球

<强> 1。加入package.json文件以及index.android.js文件

一般地,我们可以在项目根目录下创建package.json文件以及index.android.js文件。

package.json文件类似与Android中的build.gradle文件,在其中主要配置了反应本地所需的依赖库以及一些脚本语句。以下的代码可以看作是一个包。json文件的模版,版本号可以根据需要而定。

{ 　　,“name":,“XXX" 　　,“version":,“0.0.1" 　　,“private":没错, 　　,“scripts": { 　　,“时:“node  node_modules/react-native local-cli/cli.js 时, 　　,“test":“jest" 　　}, 　　,“dependencies": { 　　,“react":,“16.0.0" 　　,“react-native":,“0.50.3" 　　,“react-native-device-info":“^ 0.12.1" 　　}, 　　,“devDependencies": { 　　,“babel-jest":,“21.2.0" 　　,“babel-preset-react-native":,“4.0.0" 　　,“jest":,“21.2.1" 　　,“react-test-renderer":“16.0.0" 　　}, 　　,“jest": { 　　,“preset":“react-native" 　　,} 　　}

index.android。js文件是RN程序的入口文件。通常index.android。js文件如下:

import 反应,{组件},得到& # 39;反应# 39;; 　　import  { 　　,AppRegistry、视图文本, 　　},得到& # 39;react-native& # 39;; 　　 　　{class  App  extends 组件 　　,//渌椒? 　　,呈现(){ 　　返回(才能 　　,,& lt; View> 　　,,,& lt; Text>却;能够is  React  Native  Page 　　,,& lt;/View> 　　,,); 　　,}//才能…其他方法 　　} 　　AppRegistry.registerComponent (& # 39; xxx # 39;,,(),=祝辞,App);

然后,在该目录下打开终端,运行npm我命令,安装反应本地所需的依赖,安装完成后会在根目录下创建node_modules文件夹,下载的依赖就在这个文件夹下。到此,第一步的工作已经完成了。

- - - - - -分割线- - - - - -

实际上我们不会将RN代码放到Android工程里,因为在一般的公司项目中,使用SVN或者Git进行管理,客户端目录下一般都会有Android和iOS两个目录区分两个端。而反应本机作为一个跨平台的框架,放在Android或者iOS目录里都不太合适。因此个人认为比较好的做法是在Android和iOS同级目录创建一个ReactNative目录、放置RN项目的代码。因此目录结构大致如下:

。 　　├──安卓 　　,├──的树干 　　,├──分支 　　,└──tags  　　├──iOS , 　　,├──的树干 　　,├──分支 　　,└──tags ,,,,, 　　└──ReactNative  　　,├──的树干 　　,├──分支 　　,└──

此标签时,RN项目的代码包括package.json文件以及index.android。js文件都是在树干目录下,自然地,需要在树干目录打开终端,运行运行npm我命令,安装反应本地所需的依赖,而node_modules文件夹也自然会在该文件夹内创建。

<强> 2。在Android项目中配置ReactNative依赖

对于包中。json文件在Android工程中的情况

在原有Android项目中快速集成反应本地详解