现有工程集成RN步骤:
1、首先使用命令行初始化一个默认RM工程:
react-native init RN_Demo
2、新创建文件夹,并将要集成RN的工程放到该文件夹目录下边;
3、将第一步初始化得到的 文件 package.json App.js index.js 拷贝存放到要集成RN工程同级目录下;
4、执行npm install 命令,发现生成 node_modules 文件(表示成功);
5、修改build.gradle文件
5.1、修改配置文件:build.gradle(Module:app)文件集成 :(compile "com.facebook.react:react-native:+" // From node_modules)
如下:
dependencies {
compile fileTree(
dir
:
"libs"
,
include
: [
"*.jar"
])
compile
"com.android.support:appcompat-v7:23.0.1"
compile
"com.facebook.react:react-native:+"
// From node_modules
}
5.1、修改build.gradle(Project:android)
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url
"
$rootDir
/../node_modules/react-native/android"
}
增加到 allprojects{····}里边
6、修改清单文件(AndroidMainfest.xml):
在application中添加注册:
<
activity
android
:name=
"com.facebook.react.devsupport.DevSettingsActivity"
/>
7、在
BaseApplication中 导包
implements
ReactApplication 并实现方法:
private 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
protected
String getJSMainModuleName() {
return
"index"
;
}
};
在
ReactNativeHost中修改返回参数
mReactNativeHost;
@Override
public
ReactNativeHost getReactNativeHost() {
return
mReactNativeHost
;
}
通过编辑工具(Visual Studio Code)修改配置文件
Package.josn
Index.js
App.js
注意事项:
此工程非正规RN工程,所以通过 react-native run-android 不能直接运行到手机上,所以需要通过cmd(react-native run-android )启动服务后,通过studio运行工程部署到手机上;
踩过的坑:
1、现有工程集成RN出现以下错误:
原因为RN支持的最小SDK为16( minSdkVersion
16 )
2、集成后,执行:react-native run-android 报错;
需要 先执行一下
react-native upgrade
原因解释:
在将react-native集成到现有的android项目中时,当项目集成完成,运行 “react-native run-android”时出现“ Android project not found,try 'react-native android' ”的提示,但是在运行了react-native android 之后还是不能完成编译打包。出现这个问题主要是因为android项目的目录结构跟react-native支持的目录结构不一致导致的。
提示:当然了你也可以运行“
react-native upgrade
”,该命令运行之后你会发现你的android项目的目录结构变化了。