React Native集成android原生应用

工具：参考官网上的工具，一定要按照官网上工具“版本”下载，为了避免一些不必要的麻烦，切记切记！android studio本人采用的是3.4.2的版本，其余都是官网上推荐的版本。采用的API是29！！！（低版本的AS和低版本的API出现莫名其妙的错误，把我拖死了一个礼拜，天天改bug，换成上面的AS和api后直接编译过去，我真的是TMD，GRD！

步骤：
第一步：最好自己编写package.json文件，这样子你可以根据自己的需要选择想要的RN的版本（本人之前就是直接在AS里面Terminal输入npm init，它默认你安装最新的RN，哇，RN改版一次，那就是毁天灭地啊，出现的问题让你后怕。。。）。

package.json：

  {
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start",
    "bundle-android": "react-native bundle --platform android --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --dev false"
  },
  "dependencies": {
    "react": "16.8.3",
    "react-native": "0.59.1"
    }
  }

第二步：在AS中的Terminal输入

npm add react-native

然后按照官网上的步骤安装指定版本的react

npm add react@xxx

第三步：
3.1在app的build.gradle中添加一下依赖，第二个依赖是因为AS报缺少某个组件导致

  implementation "com.facebook.react:react-native:+"
  implementation 'androidx.legacy:legacy-support-v4:+'

3.2在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 “allprojects” 代码块中:

allprojects {

  repositories {
    
    maven {
       
        url "$rootDir/node_modules/react-native/android"
    }
    ...
}
...
}

（本人之前个人笔记本安装的就是低版本的AS和低版本的API，然后只要同步就有冲突，幸好单位配了一台电脑，装了高版本的AS和API，否则我真的是遥遥无期，我都想哭了。。。还有切记：这个 url "$rootDir/node_modules/react-native/android"千万不要抄官网的，你抄我的都比官网强，官网几个/…/搞死你没商量）。

第四步：在 AndroidManifest.xml 清单文件中声明网络权限:

 <uses-permission android:name="android.permission.INTERNET" />

如果需要访问 DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

（这个我看了很多别人的介绍，基本都是这样了，没有问题）

第五步：创建index.js文件（老版本是index.android.js文件），对了是在项目跟目录下创建
就采用官网的代码吧

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    );
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);

（最后一句注册，一定要记得修改，把“MyReactNativeApp”修改成你自己的项目名称，切记切记啊）

第六步：配置权限以便开发中的红屏错误能正确显示
你自己希望这个红屏通知能在哪个活动页面显示，那你就写在哪个页面，比如你可以写在MainActivity页面，我就是写在MainActivity页面的（本人是写在MainActivity页面，然后通过按钮，从原生的MainActivity页面调到RN页面上）

private final int OVERLAY_PERMISSION_REQ_CODE = 1; 

在OnCreate方法中写如下代码

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
	if (!Settings.canDrawOverlays(this)) {
	Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
				                     Uri.parse("package:" + getPackageName()));
				        startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
				    }
				}

然后再MainActivity中重写以下方法

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                // SYSTEM_ALERT_WINDOW permission not granted
            }
        }
    }
}

为了让大家能看懂，我还是附上MainActivity的代码吧，少侠们，接好！

public class MainActivity extends AppCompatActivity {

private final int OVERLAY_PERMISSION_REQ_CODE = 1;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
        if (!Settings.canDrawOverlays(this)) {
            Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                    Uri.parse("package:" + getPackageName()));
            startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
        }
    }

    findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Intent intent = new Intent(MainActivity.this,MyReactActivity.class);
            startActivity(intent);

        }
    });

}

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                // SYSTEM_ALERT_WINDOW permission not granted...
            }
         }
      }
   }
}

第七步：创建MyReactActivity，就是为了启动RN界面的代码！！！激动不？

public class MyReactActivity extends ReactActivity {
@Nullable
@Override
protected String getMainComponentName() {
    return "HelloWorld05";
}

@Override
protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this,getMainComponentName());
}
}

在getMianComponentName()的方法中一定要记得返回自己的，自己的，自己的项目名称！！！切记切记切记啊！我采用的案例是我自己的项目名称“HelloWorld05”，你们把这个改成自己的项目名称。

第八步：创建MyApplication，这个在官网中是看不到的，我要不是多看几篇文档，我玩个球。。。
不多说，附上代码

public class MyApplication extends Application implements ReactApplication {
@Override
public void onCreate() {
    super.onCreate();
      SoLoader.init(this, /* native exopackage */ false);
}
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;
}
}

在清单文件中一定要把Application的名字和MyReactActivity注册哟！！！！
我不放心你们，我把我的带给你瞅瞅

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.helloworld05">

<uses-permission android:name="android.permission.INTERNET" />

<application
    android:name=".MyApplication"
    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=".MyReactActivity"></activity>
</application>
</manifest>

基本已经完成了，但是还是没有完成！最后一个重点就是，为了防止出现红屏显示什么不能加载script的，一定要记得最后一步！
在main下面创建assets文件夹
然后在AS中的Terminal输入

react-native bundle --platform android --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --dev false

如果成功了，就会在assets文件夹中生产一个文件——index.android.bundle文件

好了，最后在Terminal输入npm start,然后再像以前运行andriod程序一样的方式，运行它吧！
希望我能帮助大家，真的不容易啊，我都想哭死了，React Native的官方文档真的不行，facebook也是一个大公司了，这个文档怎么能这样？！这么坑的吗？