React-Native集成到现有的安卓项目中(坑死了)

时间 2019-12-09

原文原文链接

React-Native集成到现有的安卓项目中

RN集成到ios的参见上一篇：https://github.com/ZhangMingZhao1/MingZhao-s-blog/issues/1java

毕竟要作跨端，ios调研完了安卓还要再去跑通一下，弄下来感受安卓比ios更坑一点。RN如今对版本的依赖太固定了，网上问题的教程也太少，版本不同就不适用了。node

1.

按照官网配置相关环境，后面的项目教程就不要跟着官网了，对新手不友好，适合会点原生的开发者，https://reactnative.cn/docs/getting-started/，
安装Android Studio，第一次打开会下载相关的SDK，按照官网教程来，还有JDK，配置环境变量。react

用AS建立一个empty activity的项目，android

2.

在Android工程中打开Terminal窗口，npm init，npm install –save react react-native，这样默认下载的最新版，若是出现rn须要哪一个版本react支持就install @xx.xx版本的。ios

就在版本这里卡了好久，我这里以前安装的ios的版本git

"dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0"
  }

到后面在安卓里增长activity的时候发现和教程的不同了，AS提示我要重写函数，这个后面说。
因此我如今成功的版本是：github

"react": "^16.6.3",
"react-native": "^0.57.7"

3.

在项目的根目录建立.flowconfig文件,该文件的内容能够从Facebook 的GitHub上下载, 查看这里, 将其内容copy进去便可;shell

4.

接下来在咱们项目的根目录下的package.json文件中的scripts节点下添加改句:
"start": "node node_modules/react-native/local-cli/cli.js start"npm

在咱们的项目根目录下添加index.js文件(老rn版本叫index.android.js),该文件便是咱们的RN界面,而后在该文件中添加咱们React Native界面的代码,例如简单的HelloWorld:
代码以下:json

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

export default class App extends Component {
  render() {    return ( <Text>Hello world!</Text>);
  }}
AppRegistry.registerComponent('application', () => App);

5.

在android两个build.gradle里添加

dependencies {
    implementation 'com.android.support:appcompat-v7:26.1.0'(每一个人的版本这里可能不同)
    implementation 'com.facebook.react:react-native:+'
}

allprojects {
    repositories {
        google()
        jcenter()
        maven {
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

6.

添加NDK支持,若是不添加这句话的话,可能会形成关于32位和64位SO库混合引入Crash:
i).在App 的build.gradle中的defaultConfig节点下添加以下语句:

ndk {
   abiFilters "armeabi-v7a", "x86"
}
即:
defaultConfig {
        applicationId "com.example.lance.myapplication"
        minSdkVersion 23
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }

ii).而后在咱们project下的gradle.properties文件中的末尾添加以下语句:
android.useDeprecatedNdk=true

iii).在App的build.gradle文件的android节点下添加:
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}

7.

完成以上步骤后,React Native就算集成到咱们现有的Android项目中,接下来咱们用Activity来展现咱们的RN:

新版本中的ReactNative只须要自定义一个Activity,并将其集成ReactActivity,实现getMainComponentName()方法,在该方法中返回一开始咱们注册的ReactNative的名称便可(即跟咱们的index.js中的AppRegistry中的第一个参数相同),在ReactActivity中,已经帮咱们实现了ReactRoot与ReactInstanceManager的配置,在以前的版本中,ReactRoot与ReactInstanceManager须要咱们本身去写:
完成上面后，咱们在android里main里新增一个activity：

package com.example.zhangmingzhao.rnandroid;

import javax.annotation.Nullable;

import com.facebook.react.ReactActivity;

public class MyReactActivity extends ReactActivity {
    @Nullable
    @Override
    protected String getMainComponentName() {        return "application";   //application即注册ReactNative时的名称;
    }
}

这里就是我上面说的遇到的版本的坑，我以前装的ios的版本的rn的时候，重写getMainComponentName后AS还报错提示我要重写一些其余方法，可能就是版本的问题。

8.

接下来建立一个MyApplication,并初始化一个ReactNativeHost,该MyApplication继承Application并实现ReactApplication,在源码loadApp方法时,会将当前的Activity的Application强制转换成ReactApplication:

package com.example.zhangmingzhao.rnandroid;

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;

public class MyApplication extends Application implements ReactApplication {

    private final ReactNativeHost reactNativeHost = 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 reactNativeHost;
        }
        @Override
        public void onCreate() {
            super.onCreate();
            SoLoader.init(this,false);
        }
}

注意有的包option + 回车会提示多个，注意引对。
（这里写的getUseDeveloperSupport好像就是我上部低版本rn下要提示额外重写的方法？）

9.

在原生中加一个按钮，在 MainActivity 添加一个按钮跳转到 MyReactActivity，首先在 app/src/main/res/layout 下的 activity_main.xml 添加一个按钮元素

<Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="点击跳转到RN界面"/>

在 MainActivity 里添加点击跳转事件

package com.example.zhangmingzhao.rnandroid;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 点击按钮跳转到 react-native 页面
        findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(new Intent(MainActivity.this,MyReactActivity.class));
            }
        });
    }
}

10.

最后在 app/src/main/AndroidManifest.xml 文件中，添加一些权限，以及声明MainApplication 跟 MyReactActivity

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

    <uses-permission android:name="android.permission.INTERNET"/>   <!-- 网络权限 -->
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <!-- 弹框权限 -->
    <uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW"/> <!-- 窗体覆盖权限 -->
    <!-- 声明MainApplication -->
    <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>
        <!-- 声明MyReactActivity -->
        <activity
            android:name=".MyReactActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme">
        </activity>
        <!-- 声明能够经过晃动手机或者点击Menu菜单打开相关的调试页面 -->
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
    </application>
</manifest>

这种方法下的必需要打包：
咱们手动的在app/src/main/目录中添加一个assets目录, 并在该目录下添加一个index.android.bundle文件, 而后手动在该bundle文件中添加内容, 执行如下命令:

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

声明:

--platform : 平台(android/ios)

--dev : 开发模式

--entry-file : 条目文件

--bundle-output : bundle文件生成的目录

--assets-dest : 资源文件生成的目录

ios的npm start启动，安卓模拟器也没识别到，若是是dev模式的话还要另需配置，待我补充，因此整体安卓比ios仍是坑多了。

12.

打包后就能够在AS中运行了。注意每次改动AS的配置，都要从新点下Sync

第一次建立，clone安卓项目也要Sync，还要下载一些东西，用公司内网是真的慢，我本身开的热点。。

13

demo连接：
https://github.com/ZhangMingZhao1/react-native-pratice/tree/master/RNAndroid

整体安卓仍是比IOS坑一些，安卓集成RN这个待补充吧。