android原生项目整合ReactNative

2019-11-09 17:49:08

字体：大中小

来源：转载

供稿：网友

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'}

Gradle配置

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

在项目的根目录下的build.gradle中修改项目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 ( <View style={styles.container}> <Text style={styles.hello}>这是React-Native组件</Text> </View> ) }}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配置文件

<?xml version="1.0" encoding="utf-8"?><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、接着按之前的步骤运行就会出现理想中的结果

这里写图片描述

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<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage() ); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }}