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機。