rnandroid
『壹』 區分頁面是rn還是android原生
android用的是java語言開發的,RN是用JS語言開發的。你可以看一下app的特殊效果,有web樣式獨有的就是RN,原生的效果和動畫會給人更穩定的感覺
『貳』 如何評價 React Native Android
React Native項目成員Tom Occhino發表的React Native: Bringing modern web techniques to mobile(牆外地址)詳細描述了React Native的設計理念。Occhino認為盡管Native開發成本更高,但現階段Native仍然是必須的,因為Web的用戶體驗仍無法超越Native:
1. Native的原生控制項有更好的體驗;
2. Native有更好的手勢識別;
3. Native有更合適的線程模型,盡管Web Worker可以解決一部分問題,但如圖像解碼、文本渲染仍無法多線程渲染,這影響了Web的流暢性。
Occhino沒提到的還有Native能實現更豐富細膩的動畫效果,歸根結底是現階段Native具有更好的人機交互體驗。筆者認為這些例子是有說服力的,也是React Native出現的直接原因。
圖3 - Occhino在F8分享了React Native(Keynote)
Learn once, write anywhere
「Learn once, write anywhere」同樣出自Occhino的文章。因為不同Native平台上的用戶體驗是不同的,React Native不強求一份原生代碼支持多個平台,所以不提「Write once, run anywhere」(Java),提出了「Learn once, write anywhere」。
圖4 - 「Learn once, write anywhere」
這張圖是筆者根據理解畫的一張示意圖,自下而上依次是:
1. React:不同平台上編寫基於React的代碼,「Learn once, write anywhere」。
2. Virtual DOM:相對Browser環境下的DOM(文檔對象模型)而言,Virtual DOM是DOM在內存中的一種輕量級表達方式(原話是lightweight representation of the document),可以通過不同的渲染引擎生成不同平台下的UI,JS和Native之間通過Bridge通信(React Native通信機制詳解 « bang』s blog)。
3. Web/iOS/Android:已實現了Web和iOS平台,Android平台預計將於2015年10月實現(Blog | React)。
前文多處提到的React是Facebook 2013年開源的Web開發框架,筆者在翻閱其發布稿時,發現這么一段:
圖5 - 摘自React發布稿(2013)
1. 加亮文字顯示2013年已經在開發React Native的原型,現在也算是厚積薄發了。
2. 最近另一個比較火的項目是Flipboard/react-canvas · GitHub(詳見 @rank),渲染層使用了Web Canvas來提升交互流暢性,這和上圖第一個嘗試類似。
React本身也是個龐大的話題不再展開,詳見facebook/react Wiki · GitHub。
筆者認為「Write once, run anywhere」對提升效率仍然是必要的,並且和「Learn once, write anywhere」也沒有沖突,我們內部正在改造已有的組件庫和HybridAPI,讓其適配(補齊)React Native的組件,從而寫一份代碼可以運行在iOS和Web上,待成熟後開源出來。
持續更新...
二、規劃
下圖展示了業務和技術為React Native所做的改造:
圖6 - 業務和技術改造圖6 - 業務和技術改造
自下而上:
1. React Node:React支持服務端渲染,通常用於首屏服務端渲染;典型場景是多頁列表,首屏服務端渲染翻頁客戶端渲染,避免首次請求頁面時發起2次http請求。
2. React Native基礎環境:
2.1. Framework集成:盡管React Native放出了Integration with Existing App文檔,集成到現有復雜App中仍然會遇到很多細節問題,比如集成到天貓iPad客戶端就花了組里iOS同學2天的時間。
2.2. Networking改造:主要是重新建立session,而session通常存放於http header cookie中,React Native提供的網路IO fetch和XMLHttpRequest不支持改寫cookie。所以要不在保證安全的條件下實現fetch的擴展,要麼由native負責網路IO(已有session機制)再通過HybridAPI由JS調用,暫時選擇了後者。
2.3. 緩存/打包方案:只要有資源從伺服器端載入就避免不了這個話題,React Native也是如此,緩存用於解決資源二次訪問時的載入性能,打包解決的是資源首次訪問時的載入性能。
3. MUI是一套組件庫,目前會採用向React Native組件補齊的思路進行改造。
4. HybridAPI是阿里一組Hybrid API,此前也在多個公開場合(如感測器 @杭JS)分享過不再累述,React Native建立了自己的通信機制,看起來更高效(未驗證),改造成本不大。
5. 最快的一個業務將於4月中上線,通過最初幾個業務改造推動整體系統的改造,如果效果如預期則會啟動更大規模的業務改造。
更多詳細規劃和進展,以及性能、穩定性、擴展性的數據隨後放出。
三、風險
1. 盡管Facebook有3款App(Groups、Ads Manager、F8)使用了React Native,隨著React Native大規模應用,Appstore的政策是否有變不得而知,我們只能往前走一步。
* 更新:
2015.7.28 AppStore審核政策調整:允許運行於JavascriptCore的動態載入代碼,下圖是此前的審核政策,對比加亮部分的改變。
2. React Native Android 已於2015.9.15發布,第一個使用RN開發的Android App(Facebook Adverts Manager)6.29已上架Play了。
3. iOS6 javascriptCore.framework 為私有,如在iOS6上使用有拒審風險。(http://stackoverflow.com/questions/23514579/javascriptcore-framework-availability-on-ios),可以通過JavaScriptCore-iOS · GitHub這個庫代替,涉及改動較多,只在實驗階段支持了iOS6。
4. ListView 性能問題需要持續關注(ListView renders all rows? · Issue #499 · facebook/react-native · GitHub)
React Native相對於Webview和Native的優勢和劣勢 @berg 也給出了較詳細的描述,可以相互參照。
『叄』 如何使用React Native Android 實現本地組件的安裝
使用RN-android 時有時會發現,運行某個組件時,報js組件找不到的問題,參考下面的步驟:
demo 參考:
https://github.com/larsvinter/react-native-awesome-button
在js中 require失敗的問題,大多數是require的那個東西(實際就是一個js文件),並沒有部署在當前的node伺服器里,所以解決辦法就是把那個js文件手動一份到啟動react-js的node伺服器目錄下
npm install -g 中-g是globel的意思
require 尋找順序是依次尋找上級目錄
可以通過react-native android在當前目錄下創建一個包括rn骨架的工程
默認引用index.android.js
直接自定義使用也是不行的
Command
`run-myReactAndroid` unrecognized Usage:
react-native
Commands:
start: starts the webserver install: installs npm react components
bundle: builds the javascript bundle for offline use new-library:
generates a native library bridge android: generates an Android
project for your app
packager的啟動可以執行 react-native start
可能遇到一些error【graldew wrapper 出錯】,使用 gradlew installDebug/installRelease 直接執行
$ ./gradlew assemble -為所有構建類型創建apk
$ ./gradlew check 運行所有的檢查,比如說Android Lint,如果發現問題可終止任務 $ ./gradlew build 運行以上兩個任務
$ ./gradlew clean -清除生成的apk ++++
$ ./gradlew connectedCheck - 在設備上運行測試
$ ./gradlew deviceCheck - 遠程設備運行測試
$ ./gradlew installDebug/installRelease - 在設備商安裝指定版本
$ ./gradlew uninstall - 卸載
所有gradlew命令:
luoyuandeMacBook-Pro% gradlew tasks
:tasks
------------------------------------------------------------
All tasks runnable from root project
------------------------------------------------------------
Android tasks
-------------
androidDependencies - Displays the Android dependencies of the project.
signingReport - Displays the signing info for each variant.
sourceSets - Prints out all the source sets defined in this project.
Build tasks
-----------
assemble - Assembles all variants of all applications and secondary packages.
assembleAndroidTest - Assembles all the Test applications.
assembleDebug - Assembles all Debug builds.
assembleRelease - Assembles all Release builds.
build - Assembles and tests this project.
buildDependents - Assembles and tests this project and all projects that depend on it.
buildNeeded - Assembles and tests this project and all projects it depends on.
clean - Deletes the build directory.
compileDebugSources
compileDebugUnitTestSources
compileReleaseSources
compileReleaseUnitTestSources
mockableAndroidJar - Creates a version of android.jar that's suitable for unit tests.
Build Setup tasks
-----------------
init - Initializes a new Gradle build. [incubating]
wrapper - Generates Gradle wrapper files. [incubating]
Help tasks
----------
components - Displays the components proced by root project 'AliReactAndroid'. [incubating]
dependencies - Displays all dependencies declared in root project 'AliReactAndroid'.
dependencyInsight - Displays the insight into a specific dependency in root project 'AliReactAndroid'.
help - Displays a help message.
projects - Displays the sub-projects of root project 'AliReactAndroid'.
properties - Displays the properties of root project 'AliReactAndroid'.
tasks - Displays the tasks runnable from root project 'AliReactAndroid' (some of the displayed tasks may belong to subprojects).
Install tasks
-------------
installDebug - Installs the Debug build.
installDebugAndroidTest - Installs the android (on device) tests for the Debug build.
uninstallAll - Uninstall all applications.
uninstallDebug - Uninstalls the Debug build.
uninstallDebugAndroidTest - Uninstalls the android (on device) tests for the Debug build.
uninstallRelease - Uninstalls the Release build.
Verification tasks
------------------
check - Runs all checks.
connectedAndroidTest - Installs and runs instrumentation tests for all flavors on connected devices.
connectedCheck - Runs all device checks on currently connected devices.
connectedDebugAndroidTest - Installs and runs the tests for debug on connected devices.
deviceAndroidTest - Installs and runs instrumentation tests using all Device Providers.
deviceCheck - Runs all device checks using Device Providers and Test Servers.
lint - Runs lint on all variants.
lintDebug - Runs lint on the Debug build.
lintRelease - Runs lint on the Release build.
test - Run unit tests for all variants.
testDebugUnitTest - Run unit tests for the debug build.
testReleaseUnitTest - Run unit tests for the release build.
Other tasks
-----------
jarDebugClasses
jarReleaseClasses
To see all tasks and more detail, run with --all.
Adding Android to an existing React Native project
If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:
Update the
react-native
dependency in your
package.json
file to
the latest version
$ npm install
$ react-native android
『肆』 rn運行在安卓真機上怎麼reload
主要通過以下幾個步驟: 1、手機通過數據線連接在電腦上 2、設置android手機為USB調試模式。步驟: menu- 設置 - 應用程序 - 開發 , 選擇【USB調試】 3、如果是window系統,系統會提示安裝驅動: 選擇正確的android sdk安裝目錄,然後點擊下一步,系統就開始安裝驅動了 4、驅動安裝完成之後,重啟電腦(通常系統會有「安裝新驅動,重啟才能生效」的提示),這但應該明白吧 5、重復第1步和第2步,打開命令窗口,檢測手機設備是否已經被識別,如下所示: 「HT99YLG11834 device」就是檢測到得手機設備 6、接下來就開始在eclipse上調試android程序了, 右擊android工程-Run as-Android Application ,彈出如下窗口:(重新啟動系統之後才有這樣的效果) 7、選中手機設備,點擊OK之後,程序就開始在真機上安裝了,控制台輸出如下信息: 8. 設置應用程序為調試模式。操作: 編輯AndroidManifest.xml 增加調試參數android:debuggable=true, 如下: <application android:icon=@drawable/icon android:label=@string/app_name android:debuggable=true 9. 執行真機調試操作:ECLIPSE調試對話框中,Target窗口中選擇Manual,點擊【debug】按鈕,選擇真機設備,開始調試。 注:不管是否啟用ECLIPSE環境,任何Android軟體只要在真機上運行發生異常,都可以在命令行窗口下查看具體異常信息: 執行:./adb logcat 可以查看到更多的系統異常消息。在這些消息中要注意查看Caused by:打 頭的行,這些行指明了在哪行代碼出的錯誤10、運行這個應用程序,這樣就可以使用手機來測試了
『伍』 react-native 怎麼運行在android
樓主:不太清楚你想表達什麼意思,但是你想使用RN開發Android應用,首先你要先搭建好開發環境,可以參考Facebook的官方文檔:https://facebook.github.io/react-native/docs/getting-started.html
搭建好開發環境後,運行下面幾個命令就可以得到一個RN項目:
react-nativeinitAwesomeProject
cdAwesomeProject
react-nativestart
react-nativerun-android
你可以選擇在手機上或者模擬器上運行項目,使用adb devices可以查看連接到你電腦的手機或者模擬器。
當然,如果想學習RN開發的話,需要了解的知識還是很多的,但是學任何一門技術都是有一定的困難,網上有很多關於RN的入門教程,但最重要的還是官方文檔,近期我在做一個RN的實戰項目教程,歡迎Q我:879942736了解學習。
『陸』 android rn 是什麼意思
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this
『柒』 react native android 在真機上運行流暢嗎
1、不特別優化的情況下,RN的流暢方面秒殺絕大部分H5的方案還是毫無壓力的。
2、如同原生開發一樣,不正確的使用、某些限制、超負荷的使用一樣會會導致卡頓。RN從0.15開始,提供了較為完善的方法去檢測&優化,然而目前還在實驗中,不能說是很完善。
3、目前在安卓上還存在一個比較重要的內存問題,需要等待官方解決,臨時的解決方案需要Server的支持。
作者:鄧鋆
鏈接:http://www.hu.com/question/37349514/answer/73028469
來源:知乎
著作權歸作者所有,轉載請聯系作者獲得授權。
『捌』 rn android 投屏到電腦 如何實現 代碼
不知道你說的是啥,我投屏用的是投屏器,某寶幾十塊錢一個。
『玖』 React Native是未來趨勢,作為Android開發者的我,現在要怎麼辦
不要慌張,rn只是針對快速開發的人來說必須接觸的,還有就是開發運用的。
很多公司都是有硬體的很多都是安卓原生開發,主要是看從業的公司和市場,不一定都是要用rn開發的,目前市場上rn還處於觀望期,可以自行學習。。
學習就去rn中文網,定時更新,坑在他們的教學用mac機。