一、Android项目集成RN
1.新建普通Android项目
新建一个普通的Android项目即可，打开Android Studio -> File -> New -> New Project... 按步骤执行即可。
二、在项目根目录下引入React Native模块
在AS中的Terminal中输入npm init ,输入一些项目的描述属性(默认一路回车也行)，为了生成·文件的项目描述，根据提示来填写就好了,生成的json文件内容大致如下
生成可以随便输入就好，到时再改
我的如下
{
"name": "rnNativeApplication",
"version": "1.0.0",
"description": "first",
"main": "index.js",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"author": "water",
"license": "ISC",
"dependencies": {
"react": "16.6.3",
"react-native": "0.57.8"
}
}
三、引入rn 的模块
npm install --save react react-native
会在根目录生成一个node_modules文件夹，存的是RN的一些模块文件，如果在这个过程中出现require react@某.某.某版本, but none was installed ,那么就使用命令
npm i -S react@某.某.某版本//此处为提示的版本号.。
四。引入.flowconfig文件（备注也可以不引入）
方法一：.flowconfig文件可以从facebook的github上复制，然后在工程的根目录创建.flowconfig文件，将其内容复制进去即可。
方法二：在Terminal中执行以下命令
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
五、接下来打开package.json文件，在scripts模块下添加，如上步骤2显示
"start": "node node_modules/react-native/local-cli/cli.js start"
六、在项目根目录下的build.gradle添加以下配置
allprojects {
repositories {
mavenLocal()
google()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
// url "$rootDir/../node_modules/react-native/android" 备注这里额外注意了，之前按这个配置会找不到对应的ReactApplication
url "$rootDir/node_modules/react-native/android"
}
}
configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0' }
}
八、在app下的build.gradle -> dependencies 添加以下依赖：
compile "com.facebook.react:react-native:+" // From node_modules.
同时在android -> defaultConfig 中添加
ndk{ abiFilters "armeabi-v7a","x86"}
九、清单文件配置（完整的）
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="rn.water.com.rnnativeapplication">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<application
android:name=".MainApplication"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
<activity android:name=".RnActivity" />
</application>
</manifest>
如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:
十、copy js 文件有如下三个
index 是回头rn的入口界面
1.https://www.jianshu.com/p/07eb7c17ca91?tdsourcetag=s_pctim_aiomsg 引用不到ReactApplication
十一、对应的java 代码
Application
package rn.water.com.rnnativeapplication;
import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import java.util.Arrays;
import java.util.List;
/**
* @author caiys
* @date 2019/2/25.
* @description
*/
public class MainApplication extends Application 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";
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}
对应的RNActivty
package rn.water.com.rnnativeapplication;
import com.facebook.react.ReactActivity;
/**
* @author caiys
* @date 2019/2/25.
* @description
*/
public class RnActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "rnNativeApplication";
}
}
这样基本配置就完成了。
十二、开启rn的服务
//先开启本地react native服务
adb reverse tcp:8081 tcp:8081 //最好重置下代理，不然容易被占用
npm start
十三、本地代码run 一下原生跳转 rnActivity 如：
startActivity( Intent(this, RnActivity().javaClass))
最后效果：
源码：链接：https://pan.baidu.com/s/1clI7bhqV7UySpZE4DTlMrA
提取码：1jc2
复制这段内容后打开百度网盘手机App，操作更方便哦
