android 混合开发--原生项目接入 React Native （一）

概述

        公司要求下个版本项目的活动页用rn开发，之前了解过一直没有写过，因网络上大量错误及不相关信息，此博客只记录在原生项目接入rn框架过程遇到的问题，不涉及太多代码以及rn组件和语法特性。

        后续开发的心得笔者会继续分享。接入过程参考但不限于rn英文官网（官网接入过程写的相当概括，隐藏省略了n个坑，英文官网和中文官网接入思路还不一样，简直是大坑比！），RN环境基于已配置好，即npm命令可用，若没有搭建请移步：https://reactnative.cn/docs/0.47/getting-started.html

环境

         windows + Android Studio3.0 + gradle3.0.0

接入过程

         1.创建rn项目 

            在目标路径执行命令（cmd）：react-native init MyApp --version 0.53.0

          “MyApp”为项目名称，“0.53.0”为react-native版本，我用的0.53.0，官网最新release版本为0.54.0，版本这里强调下，最新版本可能不稳定最好用稳定版本

         2.项目嫁接

           创建完成后删除rn项里android文件夹下的所有文件（以我的举例：MyApp>android>...）,然后将原生项目文件cpoy到android目录下，并将入口名称改为原生项目名称（index.js）

   默认：

import { AppRegistry } from 'react-native'；
import App from './App'；
AppRegistry.registerComponent('MyApp', () => App)；

    改后：

import { AppRegistry } from 'react-native'；
import xxx from './xxx'；
AppRegistry.registerComponent('MyApp', () => xxx)

然后继续往下配置，在整个工程的build.gradle中添加

allprojects {
        repositories {

            mavenLocal()
            jcenter()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url "$rootDir/node_modules/react-native/android"
            }
        }
    }

然后在moudle里的build.gradle里添加

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.0.1'
    testCompile 'junit:junit:4.12'

    compile "com.facebook.react:react-native:0.53.0"  // 推荐使用稳定版本，不要使用“+”
}

然后在配置联网权限，一般项目里都已经配好这个权限

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

然后在清单文件里注册调试acitivity

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

然后再配置展示rn页面的activity

public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // The string here (e.g. "MyReactNativeApp") has to match
        // the string in AppRegistry.registerComponent() in index.js
        mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

如果targetSdkVersion<21，需要用com.android.support:appcompat包下的AppCompatActivity替换

 Activity

踩坑记录

接下来就开始踩坑了！！！

按照官网到此步骤已经万事大吉了，那好咱们运行试一试


执行react-native run-android，报错！！

ENOENT: no such file or directory, open 'D:\MyApp\android\app\src\main\AndroidManifest.xml'

这是因一般公司项目都会把默认的moudle名称App改成自己的名字（例如JingDongMall），但rn默认的项目名
称app，只更改index.js的入口是不够的，没有指定app目录名称，后来在hithup社区里找到这个路径下的
runAndroid. js文件还有好多选项可以指定

MyApp\node_modules\react-native\local-cli\runAndroid\runAndroid.js

这些命令都有对应通俗易懂的英文的解释，不懂得伙伴请自行翻译吧，其中的appfolder就是用来

指定moudle的名称，所以这个错误咱们需要指定下名称

react-native run-android --appFolder MyApp

但是运行之后又会有新的错误

Error: Activity class {xxx.xxx/xxx.xxx.MainActivity} does not exist.

出现这个错误已知有两种原因：

1.清单文件里的package和build.gradle里的applicationId不一致，这种情况把两者统一即可

2.moudle的名称不是app且applicationId和Mainactivity之间有文件路径，比如我的demo还有acyivity的
文件夹，这种情况需要指定下启动Mainactivity的路径



所以运行时需要指定一下

react-native run-android --appFolder MyApp --main-activity activity.MainActivity

--main-activity这个口令在runAndroid.js文件里也有说明,意为指定入口路径

再次运行可以顺利安装并且顺利启动

但是在交互过程中如果触发了展示rn页面的逻辑的话，会爆出新的错误(新版本)

java.util.concurrent.ExecutionException:java.lang.RuntimeException:referenceError:
can't find variable:_fbBatchedBridge
或者
Cannot find entry file index.android.js in any of the roots

这是React Native升级之后，不会自动生成打包文件，我们可以通过这两种方式解决这个问题


方法一：设置IP和端口

具体步骤：报错页面晃动手机，显示菜单 =》 点击Dev Settings =》 点击Debug server host & port for device =》 设置IP和端口（ex:192.168.0.20:8081）=》 点击返回 =》 页面是空白，再次点击摇一摇，选择Reload JS程序就显示出来了。

如果这种方法还是不行继续往下看。

 
方法二：原因没有找到assets下文件，需要手动创建并设置

1.首先手动在main下建立一个assets文件夹
2.然后cmd 进入项目的根目录下执行：
1
    
React-native bundle --platform Android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3.在执行 react-native run-android；

 

基本这2个方法就可以解决了，然后你就看到了让你赏心悦目的RN hello world页面。



接入原生项目的踩坑记录暂时只有这些，后续我会和大家继续分享混合开发的心得和收获，在接入过程有其他问
题或者技术困惑的伙伴，可以加群交流（备注技术交流）