android原生项目整合ReactNative

android原生项目整合ReactNative

1、配置环境

1.1、使用Android Studio创建Android原生项目

1.2、安装node.js

1.3、在项目根目录使用npm init命令创建package.json

注意项目名称要与将来android加载RN名称一致

1.4、使用npm install -save react，npm install -save react-native下载源文件

1.5、使用如下命令：

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
在android根目录下生成.flowconfig文件作用于flow主要用来做静态代码检查。

1.6、在package.json文件的scripts属性添加

 "start": "node node_modules/react-native/local-cli/cli.js start" 

1.7、配置Android项目react-native依赖库

compile"com.facebook.react:react-native:+"，//（+号代表使用最新版本）

1.8、添加ndk支持

ndk {
   abiFilters "armeabi", "armeabi-v7a", "x86", "mips"
}

1.9、添加Gradle强制依赖解析策略

configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
}

1.10、配置React-Native本地代码路径

在项目的根目录下的build.gradle中修改

1.11、在项目根目录下创建index.android.js文件

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

class HelloWorld extends React.Component {
    render() {
        return (
            
    这是React-Native组件
        
    )
    }
}
var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor:'#ccc',
    },
    hello: {
        fontSize: 20,
        color: '#fff',
        textAlign: 'center',
        margin: 10,
    },
});
//注意这里的rnapp哦
AppRegistry.registerComponent('rnapp', () => HelloWorld);

2、使用Android原生Activity

2.1、在android原生项目下重新新建一个Activity类

public class MainActivity extends AppCompatActivity 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")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        mReactRootView.startReactApplication(mReactInstanceManager,"",null);
        setContentView(mReactRootView);

    }

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

    @Override
    protected void onResume() {
        super.onResume();
        if(mReactInstanceManager!=null){
            mReactInstanceManager.onHostResume(this,this);
        }
    }

    @Override
    protected void onPause() {
        super.onPause();
        if(mReactInstanceManager!=null){
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(mReactInstanceManager!=null){
            mReactInstanceManager.onHostDestroy(this);
        }
    }

    @Override
    public void onBackPressed() {
        if(mReactInstanceManager!=null){
            mReactInstanceManager.onBackPressed();
        }else {
            super.onBackPressed();
        }
    }

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if(keyCode==KeyEvent.KEYCODE_MENU&&mReactInstanceManager!=null){
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

2.2、修改AndroidManifest.xml配置文件

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.taiji.rntest">

    <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" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        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"/>
    application>

manifest>

2.3、通过cmd命令react-native start运行服务

2.4、使用android studio运行android应用

按照惯例会出现如下错误：Could not get BatchedBridge, make sure your bundle is packaged correctly
百度会有解决办法。
解决办法如下，在android项目中创建assets目录，在根目录命令行输入如下命令

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

会在assets目录下生产如下文件

2.5、接着按之前的步骤运行就会出现理想中的结果

2.6、不足之处，没找到menu键没办法调出开发者菜单，没找到如何修改js文件后重新加载的方法。（如果有童鞋知道的话麻烦留言告知下，不胜感激）

3、使用ReactActivity

3.1、换种方式解决之前的不足之处。

3.2、将Activity类做如下修改

public class FirstActivity extends ReactActivity{

    @Nullable
    @Override
    protected String getMainComponentName() {
        return "rnapp";
    }

}

3.3、创建MainApplication类

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage()
      );
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

3.4、在AndroidManifest.xml中应用新创建的application

".MainApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ".FirstActivity">
            
                "android.intent.action.MAIN"/>

                "android.intent.category.LAUNCHER"/>
            
        
        "com.facebook.react.devsupport.DevSettingsActivity"/>
    

3.5、模拟器使用时，双击键盘R进行重新加载，Ctrl+M键调出开发者菜单

3.6、Debug调试

在开发者菜单中点击 Debug JS Remotely

如果系统安装Chrome浏览器会出现如下页面

根据提示Ctrl+Shift+J打开开发者模式，在Sources中找到index.android.js文件进行断点调试