Android原生項目集成React Native的方法
開發(fā)環(huán)境準(zhǔn)備
首先按照開發(fā)環(huán)境搭建教程來安裝React Native在安卓平臺上所需的一切依賴軟件(比如npm)。
在應(yīng)用中添加JS代碼
在項目的根目錄中運行:
$ npm init $ npm install --save react react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
npm init創(chuàng)建了一個空的node模塊(其實就是創(chuàng)建了一個package.json描述文件),而npm install則創(chuàng)建了node_modules目錄并把react和react-native下載到了其中。至于第三步curl命令,其實質(zhì)是下載.flowconfig配置文件,這個文件用于約束js代碼的寫法。這一步非必需,可跳過。下面我們打開新創(chuàng)建的package.json文件,然后在其scripts字段中加入:
"start": "node node_modules/react-native/local-cli/cli.js start"
現(xiàn)在你的package.json內(nèi)容應(yīng)該類似這樣:
{ "name": "react-example", "version": "1.0.0", "description": "this is my first react example", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node node_modules/react-native/local-cli/cli.js start" }, "keywords": [ "react", "android", "example" ], "author": "max", "license": "ISC", "dependencies": { "react": "^15.4.2", "react-native": "^0.42.3" } }
接下來在項目根目錄中創(chuàng)建index.android.js文件,然后將下面的代碼復(fù)制粘貼進來:
'use strict'; import React 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}>Hello, World</Text> </View> ) } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, }, }); AppRegistry.registerComponent('react-example', () => HelloWorld);
準(zhǔn)備工作
在你的app中 build.gradle 文件中添加 React Native 依賴:
dependencies { ... compile "com.facebook.react:react-native:+" // From node_modules. }
然后Sync的時候可能會有如下報錯(坑一):
Error:Conflict with dependency 'com.google.code.findbugs:jsr305' in project ':app'. Resolved versions for app (3.0.0) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for details.
Google一下解決方案,我們需要在app的build.gradle中添加如下代碼:
android { configurations.all { resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9' } }
編譯完美通過!哈哈~
在項目的 build.gradle 文件中為 React Native 添加一個 maven 依賴的入口,必須寫在 “allprojects” 代碼塊中:
allprojects { repositories { ... maven { // All of React Native (JS, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } } ... }
正常情況下項目的build.gradle文件和node_modules目錄都是在根目錄下面,所以需要把
url "$rootDir/../node_modules/react-native/android" 改為 url "$rootDir/node_modules/react-native/android"
接著,在 AndroidManifest.xml 清單文件中聲明網(wǎng)絡(luò)權(quán)限:
<uses-permission android:name="android.permission.INTERNET" />
如果需要訪問 DevSettingsActivity 界面,也需要在 AndroidManifest.xml 中聲明:
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
添加原生代碼
想要通過原生代碼調(diào)用 React Native ,就像這樣,我們需要在一個 Activity 中創(chuàng)建一個 ReactRootView 對象,將它關(guān)聯(lián)一個 React application 并設(shè)為界面的主視圖。
如果你想在安卓5.0以下的系統(tǒng)上運行,請用 com.android.support:appcompat 包中的 AppCompatActivity 代替 Activity 。
public class MyReactActivity 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(); // 注意這里的react-example必須對應(yīng)“index.android.js”中的 // “AppRegistry.registerComponent()”的第一個參數(shù) mReactRootView.startReactApplication(mReactInstanceManager, "react-example", 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); } }
注意這里的react-example必須對應(yīng)“index.android.js”中的“AppRegistry.registerComponent()”的第一個參數(shù),以及package.json中的name屬性保持一致
我們需要把 MyReactActivity 的主題設(shè)定為 Theme.AppCompat.Light.NoActionBar ,因為里面有許多組件都使用了這一主題。
<activity android:name=".MyReactActivity" android:label="@string/app_name" android:theme="@style/Theme.AppCompat.Light.NoActionBar"> </activity>
配置權(quán)限以便開發(fā)中的紅屏錯誤能正確顯示
如果你的設(shè)備版本在23及以上,你需要確認(rèn)你的APP是否具有overlay permission
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); } }
在onActivityResult中判斷是否獲得權(quán)限
@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... } } } }
運行你的應(yīng)用
運行應(yīng)用首先需要啟動開發(fā)服務(wù)器(Packager)。你只需在項目根目錄中執(zhí)行以下命令即可:
$ npm start
你可以把你的MyReactActivity作為launchActivity,直接啟動,或者從別的Activity跳轉(zhuǎn)過去都可以,現(xiàn)在你只需要run app,下面貼出我的MainActivity的代碼
public class MainActivity extends AppCompatActivity { private static final int OVERLAY_PERMISSION_REQ_CODE = 0x1111; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); 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); } } findViewById(R.id.text1).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(MainActivity.this, MyReactActivity.class); startActivity(intent); } }); } @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... } } } } }
界面中只有一個TextView,點擊跳轉(zhuǎn)到MyReactActivity
真是個悲傷地故事,跳轉(zhuǎn)報錯了。
繼續(xù)Google大法尋求幫助:
我們需要在module中新建一個assets目錄,android studio為我們提供了非常方便的方式,一鍵搞定!
然后我們在根目錄的命令行執(zhí)行如下命令:
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest app/src/main/res/
這是為了把react native的代碼打包到android的assets目錄中,命令執(zhí)行完畢之后,我們會發(fā)現(xiàn)assets目錄中多了三個文件,
這個就是我們react native的代碼打包之后的樣子,然后我們run app。
然后我們就會驚喜的發(fā)現(xiàn)APP成功運行起來啦!
但是
到這里并沒有結(jié)束,我們試著搖晃一下手機,開啟傳說中的debug設(shè)置對話框,但是好像并沒有反應(yīng),難道是搖晃的力度不夠?我們使出吃奶的力氣搖晃手機,還是沒卵用~而且有的同學(xué)可能已經(jīng)發(fā)現(xiàn)了,我們剛才用的是官方的打包命令,才完成了app的顯示。也就是說我們現(xiàn)在用的是app內(nèi)部的代碼,而不是我們本地node服務(wù)上的代碼。
這個就是官方教程的一個坑,我們回到初始化activity的地方,修改一點點代碼。
mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setApplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) // .setUseDeveloperSupport(BuildConfig.DEBUG) //開發(fā)者支持,BuildConfig.DEBUG的值默認(rèn)是false,無法使用開發(fā)者菜單 .setUseDeveloperSupport(true) //開發(fā)者支持,開發(fā)的時候要設(shè)置為true,不然無法使用開發(fā)者菜單 .setInitialLifecycleState(LifecycleState.RESUMED) .build(); // 注意這里的react-example必須對應(yīng)“index.android.js”中的 // “AppRegistry.registerComponent()”的第一個參數(shù) mReactRootView.startReactApplication(mReactInstanceManager, "peoplus", null);
setUseDeveloperSupport方法并沒有起作用,因為這個Config.DEBUG默認(rèn)值為false,所以這個地方我們手動寫成true。我們這個時候重新run一遍程序,發(fā)現(xiàn)非常完美。到此結(jié)束。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android使用自定義屬性實現(xiàn)圖片自動播放滾動的功能
這篇文章主要介紹了Android使用自定義屬性實現(xiàn)圖片自動播放滾動的功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05Android GestureDetector用戶手勢檢測實例講解
這篇文章主要為大家詳細介紹了Android GestureDetector用戶手勢檢測實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-03-03flutter實現(xiàn)頁面多個webview的方案詳解
這篇文章主要為大家詳細介紹了flutter如何實現(xiàn)頁面多個webview的效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解下2023-09-09