混合開發的大趨勢之一React Native與Android聯調
公司某個app的rn模組已經上線了,雖然我沒參與,但是從調研開始我都有大致瞭解,然後今天去學系列下,結合官方例子就寫了這篇
基礎配置部分
解說過程是從你Native加入rn模組,新建的rn專案配置的東西都有
首先 在你的專案根目錄同級開一個rn目錄(這裡只是舉個例子)
mkdir xxx-rn && cd xxx-rn
像這樣
xxx-rn就是剛才新建的資料夾
lib和project就是你原有的專案
然後下所需的包以及生成package.json檔案
可能需要翻牆,或者跑tb的映象
npm init
以及
npm install react react-native --save
再然後就把你的js程式碼丟到這裡就行了,丟完之後啟動服務
node node_modules/react-native/local-cli/cli.js start
就是起一個node.js的服務
然後在package.json檔案裡新增這段指令碼
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
以後就直接 npm start就能跑 不用打一長串路徑,類似於 win的環境變數
通常 rn的編譯會跑 外網maven但是其實現在新版本rn釋出都是走的npm,所以這些依賴都在你的”本地maven”環境裡,所以需要修改主專案的build.gradle
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
一定要先mavenLocal()不然maven{}將沒有效果,指向的地址其實也就是本地的”com.facebook.react.react-native”
這些都加完了ok,那再新增react-native 依賴
dependencies {
compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules
}
至此 基本的配置就都ok了,開始搞安卓程式碼(這部分官網抄的)
安卓程式碼部分
//需要繼承ReactActivity
public class MainActivity extends ReactActivity {
//根檢視
private ReactRootView reactRootView;
//RN管理類
private ReactInstanceManager reactInstanceManager;
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "WjjPro";
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//初始化
reactRootView = new ReactRootView(this);
//初始化,這部分可以看api文件,具體欄位內容還是比較多的
reactInstanceManager = ReactInstanceManager.builder()
//應用上下文
.setApplication(getApplication())
//js打包的名字
.setBundleAssetName("index.android.bundle")
//js首頁
.setJSMainModuleName("index.android")
//基礎的各種manager
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
//初始化執行的時間
.setInitialLifecycleState(LifecycleState.BEFORE_RESUME)
.build();
reactRootView.startReactApplication(reactInstanceManager, "WjjPro", null);
//渲染
setContentView(reactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
Log.d("--->","onPause");
if (reactInstanceManager != null) {
reactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
Log.d("--->","onResume");
if (reactInstanceManager != null) {
reactInstanceManager.onHostResume(this, this);
}
}
@Override
protected void onDestroy() {
super.onDestroy();
Log.d("--->","onDestroy");
if (reactInstanceManager != null) {
reactInstanceManager.onHostDestroy();
}
}
@Override
public void onBackPressed() {
Log.d("--->","onBackPressed");
if (reactInstanceManager != null) {
reactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
// @Override
// public boolean onKeyUp(int keyCode, KeyEvent event) {
// if (keyCode == KeyEvent.KEYCODE_BACK && reactInstanceManager != null) {
// reactInstanceManager.showDevOptionsDialog();
// return true;
// }
// return super.onKeyUp(keyCode, event);
// }
}
reactInstanceManager做了一個統籌管理,把我們Native的各種行為與rn的js頁面做關聯,分發以及管理
通過log明顯2者的關聯已經有效
相關推薦
混合開發的大趨勢之一React Native與Android聯調
公司某個app的rn模組已經上線了,雖然我沒參與,但是從調研開始我都有大致瞭解,然後今天去學系列下,結合官方例子就寫了這篇 基礎配置部分 解說過程是從你Native加入rn模組,新建的rn專案配置的東西都有 首先 在你的專案根目錄同級開一個
混合開發的大趨勢之一React Native Props (屬性)
昨天翻了點RN的第三方庫,感覺歪果仁的一些專案和“大公溼”都已經 7 8成完全應用到自己的產品,感覺不加快學習進度不行了,這裡也會加快更迭和學習進展,當然還是從官方DOC給大家介紹,沒有任何JS基礎的也可以跟得上 我會以順序翻譯+分析的角度跟大
混合開發的大趨勢之一React Native之簡單的登入介面
這些天都在學習RN這部分吧,然後寫了個簡單的登陸業務,從“實戰”中講解吧 先上下效果圖 效果很簡單就是2個<Text/> 2個<TextInput/>1個<Button/> 按鈕控制元件是第三方的,就是為了演示下如何在
混合開發的大趨勢之一React Native之頁面跳轉
最近事情有點多,沒有長時間地連貫學習,文章也停了一個多禮拜,愧疚,有時間還是繼續學習,繼續寫! 廢話不多,貼下執行效果 登陸前 登入成功後 rn的頁面跳轉都是交由Navigator來處理,我們看下文件瞭解這個常用的元件
react native與Android混合開發
想要進行混合開發你需要一定的android基礎,廢話不多說,直接上圖: 在index.android.js 中註冊3個元件,分別為A、B、C,其中程式碼基本相同: 點選text控制元件調到下一個activity,跳轉activity需要原生的支援,我
React Native與Android的互動
在使用RN進行跨平臺開發的過程中,經常會設計到跨平臺呼叫相關的內容,而在於RN進行互動的時候,最核心的就是RN提供的Component和Module。 其中,Component是專門將Native的UI暴露出來供JS呼叫的,而Native Module則是將N
React Native與Android通訊互動
剛建立的React Native 微信公眾號,歡迎微信掃描關注訂閱號,每天定期會分享react native 技術文章,移動技術乾貨,精彩文章技術推送。同時可以掃描我的微信加入react-native技術交流微信群。歡迎各位大牛,React Native技術愛好者加入
React-Native 與 Android 整合
ReactNative 讓開發者使用 JavaScript 和 React 編寫應用,利用相同的核心程式碼就可以建立 基於Web,iOS 和 Android 平臺的原生應用。Facebook 在2015.9.15釋出了 ReactNative for Android,把JavaScript 開發技術擴充套
React-Native與安卓原生的混合開發
寫在前面 目前很多大廠APP(如淘寶、餓了麼、美團等等)並不是純原生Android&IOS,也不是純JS開發,而是Hybird APP開發,混合型優勢很多:比如熱更新,保證在一些類似雙十一的活動到來時能夠快速上線活動頁面,使用者不必再去更新APP。再來有效地減小了安裝包的體積
React Native 之Android混合開發,及遇到的各種坑
最近自己也是剛在學習React Native的知識,在學習到React Native 嵌入到原生應用的時候,感覺遇到了各種坑,這裡做一下記錄。若有說得不對的地方,謝謝大家糾正。 React Native嵌入到原生應用的教程在其官方指導文件裡也有,但是感覺很多注意點沒講到,現
React-Native系列Android——Native與Javascript通信原理(一)
from 直接 最新 一點 明顯 rem 負責 receive esp React-Native最核心的是Native與Javascript之間的通信,並且是雙向通信
使用WebStorm開發React Native除錯Android專案
React-Native自帶的列印log的命令 android : react-native log-android ios : react-native log-ios android studio除錯習慣了,然後在webstorm除錯react-native找到了一個除錯外掛:r
windows下配置React-Native(Android)開發環境總結
首先配置環境我們需要用到以下工具: node.js react-native-cli Android Studio JDK(1.8以上) SDK python 1.安裝node.js和react-native-cli命令列工具
配置android開發環境、安裝Android studio、Android sdk(配置react native的Android環境)
配置react native的Android環境的步驟比較多,所以單獨提取出來記錄: 提示:如果是想搭建android開發環境安裝Android studio,本記錄貼也適用的 1. 安裝 Android Studio,配置sdk 2.建立一個android專案並執行測試
React Native macOS Android 搭建開發環境
這個講的是React Native完整的原生開發環境。 這個環境的搭配,會根據你使用的作業系統、針對的目標平臺不同,具體的搭配步驟就會有所不同;如果想同時開發iOS和Android也是沒有問題的,你需要先選一個平臺開始,對於另一個平臺的環境搭建只是稍有不同。 開發平臺:macOS、Windows
React Native macOS Android 搭建開發環境
這個講的是React Native完整的原生開發環境。 這個環境的搭配,會根據你使用的作業系統、針對的目標平臺不同,具體的搭配步驟就會有所不同;如果想同時開發iOS和Android也是沒有問題的,你需要先選一個平臺開始,對於另一個平臺的環境搭建只是稍有不同。 開發平臺:macOS
react native 與伺服器互動坑
今天遇到兩個坑 一個是以表單formData封裝的JSON格式資料不是標準的json格式,導致伺服器解析資料是錯誤返回400 bad request。例如 let formData = new FormData(); formData.append("api_accou
React Native 與 原生互動
React Native 與原生互動一般有三種方式,分別是Callback,Promise,RCTDeviceEventEmitter import { AppRegistry, StyleSheet, Text, View, NativeModule
React-Native與iOS原生的整合步驟
需求: 最近準備在公司專案中使用RN,但羅馬不是一天建成的,沒辦法將專案中所有的程式碼都換成RN,而且我也不認為全換成RN就是好的,所以準備先將專案中的一些頁面改成RN開發。這篇文章就是與iOS原生整合的步驟。 我將專案更新到了github上,裡面有很多我自己的
React Native與WebView的互動
1、WebView中注入JavaScript 在webview中通過injectJavaScript注入javascript的方法時,使用方法如下 injectJavaScript={this.init()} init()方法定義如下 init = () => { //