android开发rn插件,在Android原生应用中嵌入React Native
開發工具：Android Studio ， WebStorm
參考鏈接：React Native官方中文文檔
一.創建React Native項目
1.在本地React Native項目目錄下，創建一個文件夾，取名為為ReactApp[名字隨便取]
2.在ReactApp文件夾下，創建一個名為android文件夾【注：小寫】,并將你現有的Android項目拷貝到/android子目錄中。
3.在ReactApp文件夾下，創建一個名為package.json的空文本文件，并將以下內容拷入：
{
"name": "ReactApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.46.4"
}
}
注：代碼中name為你當前RN項目的名稱，語法請嚴格遵守Json語法規范
4.接下來我們使用npm(node包管理器，Node package manager)在項目根目錄安裝React和React Native模塊，打開終端運行：npm install ,RN所需要的模塊會被安裝到項目根目錄下的node_modules/目錄中。
二.打開Android Studio 將/android子目錄作為Android項目導入到AS中，導入項目無報錯，開始以下步驟：
配置maven：
注：如果項目minSdkVersion小于16，請修改為16，RN不支持16版本以下的設備 1.在你的app中 build.gradle 文件中添加 React Native 依賴: dependencies {
...
compile "com.facebook.react:react-native:+" // From node_modules.
} 2.在項目的 build.gradle 文件中為 React Native 添加一個 maven 依賴的入口，必須寫在 "allprojects" 代碼塊中: allprojects {
repositories {
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
注：同步Gradle如果報這個錯誤：
Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.1) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
在你的app中 build.gradle 文件中添加: android{
...
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
}
配置權限 1.在 AndroidManifest.xml 清單文件中聲明網絡權限: 2.如果需要訪問 DevSettingsActivity 界面(即開發者菜單)，則還需要在 AndroidManifest.xml 中聲明:
三.用WebStorm打開創建ReactApp項目：
在項目根目錄創建名為index.android.js文件，代碼如下：
import React, {Component} from 'react';
import {AppRegistry, View, Text, StyleSheet} from 'react-native';
//import MyLog from './js/MyLog';
//import MyToast from './js/MyToast';
class ReactApp extends Component {
constructor(props) {
super(props);
//MyLog.debug("yxjie", "constructor");
//MyLog.info('yxjie', 'constructor');
}
render() {
//MyLog.debug("yxjie", "render");
return (
歡迎來到RN界面
);
}
}
const styles = StyleSheet.create({
flex: {
flex: 1,
backgroundColor: 'skyblue',
},
center: {
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 22,
fontWeight: 'bold',
color: 'black',
}
});
AppRegistry.registerComponent('ReactApp', () => ReactApp);
四.配置權限以便開發中開啟ＲＮ紅屏錯誤能正確顯示【Android 入口Activity中配置】
1. 入口Activity的onCreate方法中添加如下代碼：
//檢測是否開啟懸浮窗權限【RN】
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
Uri.parse("package:" + getPackageName()));
startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
}
}
2. 加入onActivityResult方法回調：
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
if (!Settings.canDrawOverlays(this)) {
// SYSTEM_ALERT_WINDOW permission not granted...
}
}
}
}
五.核心內容：【創建展示React Native代碼顯示界面，并在AndroidManifest.xml申明】
請原諒我的懶惰直接貼代碼：
public class MyReactActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler{
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
// .addPackage(new AnExampleReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 注意這里的MyReactNativeApp必須對應“index.android.js”中的
// “AppRegistry.registerComponent()”的第一個參數
mReactRootView.startReactApplication(mReactInstanceManager, "ReactApp", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy();
}
}
@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);
}
}
注：以上代碼RN官方文檔都有解釋，再次不廢話【有不明白的請移步RN官方文檔，或給我留言，謝謝！！！】
五.運行代碼【若是真機調試，請用adb命令行修改設備端口為8081】
1.直接用Android Studio run一下你的代碼；
2.運行Packager，再React Native項目根目錄，打開終端直接運行：npm start 開啟RN服務；
DuangDuangDuang~~ 看到運行結果 是不是很激動，哈哈 ！
下篇文章，會寫RN注冊并調用Android原生模塊的控件方法
React Native調用Android原生方法
以上內容，如有錯誤，歡迎留言指正！ 謝謝~~~
總結
以上是生活随笔為你收集整理的android开发rn插件,在Android原生应用中嵌入React Native的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cmake交叉编译android,CMa
- 下一篇： android8 静音震动,iPhone