如何在原有Android项目中快速集成React Native详解

2023-09-18 17:11:05 77

前言

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

①做UI快

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

③入门简单，能让前端快速开发App

④iOS&Android大部分代码通用

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

......

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

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

NodeJS：选择对应的系统下载并安装，安装完即可在终端运行npm命令。
配置源，众所周知因为墙的原因，所以最好配置国内的源。

配置方法如下：

npmconfigsetregistryhttps://registry.npm.taobao.org--global
npmconfigsetdisturlhttps://npm.taobao.org/dist--global

1.加入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":"nodenode_modules/react-native/local-cli/cli.jsstart",
"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文件如下：

importReact,{Component}from'react';
import{
AppRegistry,View,Text,
}from'react-native';

classAppextendsComponent{
//...其他方法
render(){
return(

thisisReactNativePage

);
}
//...其他方法
}
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{
//AllofReactNative(JS,Androidbinaries)isinstalledfromnpm
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文件编辑冲突，推荐使用如下方式：

//加载local.properties配置
Propertiesproperties=newProperties()
InputStreaminputStream=project.rootProject.file('local.properties').newDataInputStream();
properties.load(inputStream)
allprojects{
repositories{
jcenter()
maven{
//AllofReactNative(JS,Androidbinaries)isinstalledfromnpm
urlproperties.getProperty('reactnative.dir')
}
}
}

其中local.properties文件不需要提交版本控制，并在其中添加一个reactnative.dir属性，属性值为RN的android工程目录路径，例如在我的项目中

reactnative.dir=/Users/littlebyte/svn/ReactNative/ReactNative/node_modules/react-native/android

3.创建RN视图承载的Activity或Fragment

创建RN视图承载的Activity

publicclassMyReactActivityextendsReactActivity{
@Override
protectedStringgetMainComponentName(){
//该返回值需要与N程序的入口文件index.android.js中的注册的名字相同
return"XXX";
}
}

创建RN视图承载的Fragment

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

publicclassMyFragmentextendsFragment{
publicstaticfinalStringCOMPONENT_NAME="MyFragment";
privateReactRootViewmReactRootView;
@Override
publicvoidonAttach(Contextcontext){
super.onAttach(context);
mReactRootView=newReactRootView(context);
mReactRootView.startReactApplication(
getReactNativeHost().getReactInstanceManager(),
COMPONENT_NAME,
null);
}
@Nullable
@Override
publicViewonCreateView(LayoutInflaterinflater,@NullableViewGroupcontainer,@NullableBundlesavedInstanceState){
super.onCreateView(inflater,container,savedInstanceState);
returnmReactRootView;
}
@Override
publicvoidonDestroy(){
super.onDestroy();
if(mReactRootView!=null){
mReactRootView.unmountReactApplication();
mReactRootView=null;
}
if(getReactNativeHost().hasInstance()){
getReactNativeHost().getReactInstanceManager().onHostDestroy(getActivity()
);
}
}
protectedReactNativeHostgetReactNativeHost(){
return((ReactApplication)getActivity().getApplication()).getReactNativeHost();
}
publicReactInstanceManagergetReactInstanceManager(){
returngetReactNativeHost().getReactInstanceManager();
}
}

而后Fragment该怎么用就怎么用。

4.修改Application

修改自定义的Application，实现ReactApplication接口。

publicclassMainApplicationextendsApplicationimplementsReactApplication{
publicfinalReactNativeHostmReactNativeHost=newReactNativeHost(this){
@Override
publicbooleangetUseDeveloperSupport(){
returnBuildConfig.DEBUG;
}
@Override
protectedListgetPackages(){
returnArrays.asList(
newMainReactPackage()
);
}
};
@Override
publicReactNativeHostgetReactNativeHost(){
returnmReactNativeHost;
}
}

5.修改Application，添加相应的权限以及Activity声明

RN需要添加以下权限：

除了声明自定义的Activity，还需要添加DevSettingsActivity，用来修改RN的相关设置。

至此，Android原生项目集成RN的工作就基本完成了。

6.调试

要调试首先需要启动RN的本地服务器。在package.json文件所在目录打开终端，运行react-nativestart命令即可启动本地服务器。然后安装并运行App。

如果使用模拟器调试则可以直接运行打开RN的页面，而如果使用真机调试还需要摇一摇弹出设置菜单，点击DevSettings，设置Debugserverhost&portfordevice,填入你电脑的ip:8081即可。

之后就可以愉快的调试运行了。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

如何在原有Android项目中快速集成React Native详解

热门推荐

随机推荐