【移动应用开发技术】在原有Android项目中快速集成React Native详解

【移动应用开发技术】在原有Android项目中快速集成ReactNative详解

这篇文章给大家分享的是有关在原有Android项目中快速集成ReactNative详解的内容。在下觉得挺实用的，因此分享给大家做个参考，一起跟随在下过来看看吧。前言RN经过一段时间发展，已经有充分数量的人尝试过了，就我身边就有几批，褒贬也不一：①做UI快②还是有很多限制，不如原生Native③入门简单，能让前端快速开发App④iOS&Android大部分代码通用⑤code-push能做热更新，但是用不好依旧坑在得到一些信息后，可以看出，要用RN高效率的做出比较不错的App是有可能的，单看投入度与最初设计是否合理，而且现在关于ReactNative的各种文档是相当丰富的，所以这个阶段想切入RN可能是一个不错的选择。众所周知对于现有的大多数项目来说都不是从头构建的，而要在原有项目的基础上引入ReactNative则肯定和用react-nativeinitxxx创建工程不同。因此下面就来说下具体操作。不过在真正开始之前还是要先说明一下工具配置。NodeJS：选择对应的系统下载并安装，安装完即可在终端运行npm命令。配置源，众所周知因为墙的原因，所以最好配置国内的源。配置方法如下：npm

config

set

registry

--global

npm

config

set

disturl

/dist

--global1.加入package.json文件以及index.android.js文件一般地，我们可以在项目根目录下创建package.json文件以及index.android.js文件。package.json文件类似与Android中的build.gradle文件，在其中主要配置了ReactNative所需的依赖库以及一些脚本语句。以下的代码可以看作是一个package.json文件的模版,版本号可以根据需要而定。{

"name":

"XXX",

"version":

"0.0.1",

"private":

true,

"scripts":

{

"start":

"node

node_modules/react-native/local-cli/cli.js

start",

"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

React,{Component}

from

'react';

import

{

AppRegistry,View,Text,

}

from

'react-native';

class

App

extends

Component{

//...其他方法

render(){

return(

<View>

<Text>this

is

React

Native

Page</Text>

</View>

);

}

//...其他方法

}

AppRegistry.registerComponent('XXX',

()

=>

App);然后，在该目录下打开终端，运行npmi命令，安装ReactNative所需的依赖，安装完成后会在根目录下创建node_modules文件夹，下载的依赖就在这个文件夹下。到此，第一步的工作已经完成了。分割线实际上我们不会将RN代码放到Android工程里，因为在一般的公司项目中，使用SVN或者Git进行管理，客户端目录下一般都会有Android和iOS两个目录区分两个端。而ReactNative作为一个跨平台的框架，放在Android或者iOS目录里都不太合适。因此个人认为比较好的做法是在Android和iOS同级目录创建一个ReactNative目录，放置RN项目的代码。因此目录结构大致如下：.

├──Android

├──trunk

├──branches

└──tags

├──iOS

├──trunk

├──branches

└──tags

└──ReactNative

├──trunk

├──branches

└──tags此时，RN项目的代码包括package.json文件以及index.android.js文件都是在trunk目录下，自然地，需要在trunk目录打开终端，运行运行npmi命令，安装ReactNative所需的依赖，而node_modules文件夹也自然会在该文件夹内创建。2.在Android项目中配置ReactNative依赖对于package.json文件在Android工程中的情况首先编辑在项目目录下build.gradle文件。allprojects

{

repositories

{

google()

jcenter()

//添加这个仓库

maven

{

//

All

of

React

Native

(JS,

Android

binaries)

is

installed

from

npm

url

"$rootDir/node_modules/react-native/android"

}

}

}然后在编辑app目录下的build.gradle文件，添加ReactNative依赖。implementation

'com.facebook.react:react-native:0.50.3'注意：该版本号需要与package.json文件中配置的RN版本号保持一致。之所以需要在项目的build.gradle文件中添加maven配置，是因为Android项目默认的依赖包的源jcenter()并不包含最新版的ReactNative（它只到0.20.1）。对ReactNative独立目录情况与第一种情况并无太大区别，只是RN的maven仓库路径有所不同。因为通过版本控制拉取下来的工程位置各有不同，为了避免开发人员对项目目录下的build.gradle文件编辑冲突，推荐使用如下方式：//加载perties配置

Properties

properties

=

new

Properties()

InputStream

inputStream

=

project.rootProject.file('perties').newDataInputStream();

properties.load(inputStream)

allprojects

{

repositories

{

jcenter()

maven

{

//

All

of

React

Native

(JS,

Android

binaries)

is

installed

from

npm

url

properties.getProperty('reactnative.dir')

}

}

}其中perties文件不需要提交版本控制，并在其中添加一个reactnative.dir属性，属性值为RN的android工程目录路径，例如在我的项目中reactnative.dir=/Users/littlebyte/svn/ReactNative/ReactNative/node_modules/react-native/android3.创建RN视图承载的Activity或Fragment创建RN视图承载的Activitypublic

class

MyReactActivity

extends

ReactActivity

{

@Override

protected

String

getMainComponentName()

{

//该返回值需要与N程序的入口文件index.android.js中的注册的名字相同

return

"XXX";

}

}创建RN视图承载的Fragment与Activity不同,在Fragment中加载RN有点不一样。但在Android中加载RN，无论是在Activity还是Fragment，加载的都只是一个View而已。而给Fragment设置View，只需要Fragment的onCreateView返回RN的View即可。代码如下：public

class

MyFragment

extends

Fragment

{

public

static

final

String

COMPONENT_NAME

=

"MyFragment";

private

ReactRootView

mReactRootView;

@Override

public

void

onAttach(Context

context)

{

super.onAttach(context);

mReactRootView

=

new

ReactRootView(context);

mReactRootView.startReactApplication(

getReactNativeHost().getReactInstanceManager(),

COMPONENT_NAME,

null);

}

@Nullable

@Override

public

View

onCreateView(LayoutInflater

inflater,

@Nullable

ViewGroup

container,

@Nullable

Bundle

savedInstanceState)

{

super.onCreateView(inflater,

container,

savedInstanceState);

return

mReactRootView;

}

@Override

public

void

onDestroy()

{

super.onDestroy();

if

(mReactRootView

!=

null)

{

mReactRootView.unmountReactApplication();

mReactRootView

=

null;

}

if

(getReactNativeHost().hasInstance())

{

getReactNativeHost().getReactInstanceManager().onHostDestroy(getActivity()

);

}

}

protected

ReactNativeHost

getReactNativeHost()

{

return

((ReactApplication)

getActivity().getApplication()).getReactNativeHost();

}

public

ReactInstanceManager

getReactInstanceManager()

{

return

getReactNativeHost().getReactInstanceManager();

}

}而后Fragment该怎么用就怎么用。4.修改Application修改自定义的Application，实现ReactApplication接口。public

class

MainApplication

extends

Application

implements

ReactApplication

{

public

final

ReactNativeHost

mReactNativeHost

=

new

ReactNativeHost(this)

{

@Override

public

boolean

getUseDeveloperSupport()

{

return

BuildConfig.DEBUG;

}

@Override

protected

List<ReactPackage>

getPackages()

{

return

Arrays.<ReactPackage>asList(

new

MainReactPackage()

);

}

};

@Override

public

ReactNativeHost

getReactNativeHost()

{

return

mReactNativeHost;

}

}5.修改Application，添加相应的权限以及Activity声明RN需要添加以下权限