如何愉快地調試一個 React Native for Android APP
首先確保你的電腦和手機設備在同一個Wi-Fi環境下。其次你需要開啟USB調試才能在你的設備上安裝你的APP。一定要確定你已經打開設備的USB調試開關!確保你的設備已經被成功連接，可以輸入adbdevices核實:在右邊那列看到device說明你的設備已經被正確連接了。注意，你只應當連接僅僅一個設備。因為如果你連接了多個設備（包含模擬器在內），你后續的一些操作可能會失敗。拔掉不需要的設備，或者關掉模擬器，確保adbdevices的輸出只有一個是連接狀態。現在我們可以運行react-nativerun-android來在設備上安裝并啟動我們的應用了這句命令執行后，實際上就是在本地起一個noderver，并且將你的androidproject編譯打包，再上傳到你的手機上。然后當js文件有改動或debug模式下手動選擇reloadjs時候會自動更新bundle文件，達到改動js文件后即時顯示的調試效果。這“紅屏”又是什么鬼？別著急，是正常的，我們需要連接上開發服務器，下面的步驟會解決這個問題。搖晃手機，或者運行adbshellinputkeyevent82，可以調出開發者菜單。點擊進入DevSettings點擊Debugrverhostfordevice輸入你電腦的IP地址和端口號（譬如我的是192.168.3.15:8081）注意：如果你的設備是android5.0以上版本(API21+)，就不用折騰這步了而是：運行adbrevertcp:8081tcp:8081（建立一個從設備向電腦轉發的端口，前提是設備和電腦通過USB相連）不需要配置，你就可以使用ReloadJS和其它的開發選項了Chrome開發者工具在Chrome上調試js代碼，需要在開發菜單中選擇DebugJS，這會打開一個新的debugger-uitab頁。在Chrome中，按下⌘+option+i或者選擇視圖(View)->開發者(Developer)->開發工具(DeveloperTools)來打開開發工具控制臺。打開有異常時暫停（PauOnCaughtExceptions）選項，能夠獲得更好的開發體驗。Chrome中并不能直接看到App的用戶界面，而只能提供console的輸出，以及在sources項中斷點調試js腳本。要查看APP日志？在終端下運行adblogcat*:SReactNative:VReactNativeJS:V可以看到你的應用的日志。實時刷新這個選項可以在你的js代碼變更了之后，自動觸發所連設備或者模擬器自動刷新。開啟方法：先打開開發菜單，選擇DevSettings，然后選擇AutoreloadonJSchange選項。到此才能完整的調試AndroidRN,繁瑣到累絕不愛。。等等，能否想法簡化一下過程？既然我們的RN項目里包含了完整的android工程，何不把android工程導入到androidstudio去運行？不但可以同時查看js的日志和native的日志，而且開發android的同學最熟悉AS，利用AS的快捷鍵和各類插件提升調試效率。haveatry,答案是肯定的！執行react-nativestart也可以起一個noderver，只是它不幫你安裝APP到device。以上就是我踩坑后整理的方法，按這套組合拳就可以愉快地調試了。水平有限，拋磚引玉，如果你有更好的方法！歡迎拍磚！此處插播一個廣告：拍磚請拍到我們的杏樹林開放空間（246078103），期待感興趣的同學加入。之后要解決的一些issue1，關于設備MinSdkVerisonRN只支持Android4.1.2（API16）以上設備，4.0根據網絡數據大概占比0.7比例，隨著大部分app已經不支持4.0以下設備了，這塊倒還可以接受,目前我們的病歷夾是3.0(API-11),口袋是4.0(API-14)2，我們的androidRN現在只能通過DebugJS才能渲染出界面，而不能正常的用ReloadJS3，在界面跳轉時卡的令人發指
如何使用React Native Android 實現本地組件的安裝
packager的啟動可以執行 react-native start
可能遇到一些error【graldew wrapper 出錯】，使用 gradlew installDebug/installRelea 直接執行
$ ./gradlew asmble -為所有構建類型創建apk
$ ./gradlew check 運行所有的檢查，比如說Android Lint，如果發現問題可終止任務 $ ./gradlew build 運行以上兩個任務
$ ./gradlew clean -清除生成的apk ++++
$ ./gradlew connectedCheck - 在設備上運行測試
$ ./gradlew deviceCheck - 遠程設備運行測試
$ ./gradlew installDebug/installRelea - 在設備商安裝指定版本
$ ./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 ts defined in this project.
Build tasks
-----------
asmble - Asmbles all variants of all applications and condary packages.
asmbleAndroidTest - Asmbles all the Test applications.
asmbleDebug - Asmbles all Debug builds.
asmbleRelea - Asmbles all Relea builds.
build - Asmbles and tests this project.
buildDependents - Asmbles and tests this project and all projects that depend on it.
buildNeeded - Asmbles and tests this project and all projects it depends on.
clean - Deletes the build directory.
compileDebugAndroidTestSources
compileDebugSources
compileDebugUnitTestSources
compileReleaSources
compileReleaUnitTestSources
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 produced 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.
uninstallRelea - Uninstalls the Relea 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.
lintRelea - Runs lint on the Relea build.
test - Run unit tests for all variants.
testDebugUnitTest - Run unit tests for the debug build.
testReleaUnitTest - Run unit tests for the relea build.
Other tasks
-----------
jarDebugClass
jarReleaClass
To e 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
react native android dev tting怎么配置
一，設備與環境
1，一臺 mac
2，安裝軟件包管理器 Homebrew(中文)
終端里輸入/usr/bin/ruby -e "$(curl -fsSL https://raw.githuburcontent.com/Homebrew/install/master/install)"進行安裝。
3，安裝 wget 或者 curl
wget，終端里輸入brew install wget進行安裝。
curl，終端里輸入brew install curl進行安裝。
4，安裝 nvm (node版本管理器)
如果安裝了 wget，終端輸入wget -qO- https://raw.githuburcontent.com/creationix/nvm/v0.31.0/install.sh | bash進行安裝 nvm。
如果安裝了 curl，終端輸入curl -o- https://raw.githuburcontent.com/creationix/nvm/v0.31.0/install.sh | bashÂ進行安裝 nvm。
5，Android SDK
這個不用多說了，相信大家都會的。順便把 Android SDK 配置到環境變量。
如果你沒有 Android SDK，也可以通過終端輸入brew install android-sdk。
二，安裝和初始react-native demo
終端輸入npm install -g react-native-cli安裝 react-native。
如果顯示EACCES: permission denied，用超級權限再次執行一下上面的指令。反正我是沒遇到。
進入到你要創建 demo 的目錄，終端輸入cd 你得文件路徑.
終端輸入react-native init AwesomeProject，初始 AwesomeProject 。
終端輸入cd AwesomeProject。
終端輸入react-native run-android可以直接運行 node 服務并編譯運行 Android 項目，直至安裝到手機。
如何把React Native嵌入到原生android應用中
創建一些react-native依賴的一些模塊，在package.json文件的scripts屬性中添加：
[javascript] view plain copy
"start": "node node_modules/react-native/local-cli/cli.js start"
注：如果scripts中存在其他鍵值對，則以逗號為分隔符。
在module的根目錄創建index.android.js文件，并將一下內容下入index.android.js文件：
[javascript] view plain copy
'u 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('HelloWorld', () => HelloWorld);
在Android Studio中，在moudle的build.gradle文件中添加一下內容：
[javascript] view plain copy
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
...
}
在AndroidManifest.xml文件中添加網絡訪問權限（僅在開發或調試中需要該權限）：
<us-permission
android:name="android.permission.INTERNET"
React Native開發android和ios客戶端有什么優勢和劣勢
react-native
用react 進行原生app開發的框架，讓廣大開發者使用js和react開發應用，提倡組件化開發。
優點
提供一個個封裝好的組件讓開發者使用，也可以相關嵌套形成新的組件。
可以維護多種平臺（Web，Android和IOS）的同一份邏輯核心代碼來創建原生app。
和H5類似，跨平臺、低成本開發、開發速度快、動態發布、一套類似代碼維護三個平臺。
缺點
組件不全，第三方組件也不全，遇到某些特殊功能，需要花大力氣寫；性能方面也無法媲美原生，還是有一些損耗，特別是交換大數據時；
IOS版本略好，androi發展較慢；
ios和android代碼并非通用，有可能需要維護兩套代碼或者在代碼中做一些判斷；
開發人員還是需要會原生開發，不然自定義組件無法編碼；
如何把React Native嵌入到原生android應用中
參考如下內容： 首先在Android中嵌入React Native： 每一個Android Studio project下包含多個module，所以，從命令行進入到module根目錄，運行： [plain] view plain copy $ npm init $ npm install --save react-native $ curl -o .flowconfig 。可以看看安卓巴士的教程：http://www.apkbus.com/thread-462421-1-1.html
