android原生项目整合ReactNative
16lz
2021-12-04
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配置文件
<?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、接着按之前的步骤运行就会出现理想中的结果
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文件进行断点调试
更多相关文章
- Android(安卓)入门 和 环境搭建
- ListView使用技巧
- linux基础教程--安装Android(安卓)SDK
- Android的快速开发框架afinal
- AndroidVirtual Devices (AVD)创建、设置
- Android(安卓)入门 和 环境搭建
- Android之十一实现登陆页面分析
- Android(安卓)沉浸式状态栏实现，以及遇到的问题
- 创建 cocos2d-x+lua for android 步骤