nativereactandroid
A. React Native開發android和ios客戶端有什麼優勢和劣勢
React Native 結合了 Web 應用和 Native 應用的優勢，可以使用 javaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操作系統原生的 UI 組件，代替 DOM 元素來渲染等。 React Native 使你能夠使用基於 JavaScript 和 React 一致的開發體驗在本地平台上構建世界一流的應用程序體驗。React Native 把重點放在所有開發人員關心的平台的開發效率上——開發者只需學習一種語言就能輕易為任何平台高效地編寫代碼。Facebook 在多個應用程序產品中使用了 React Native，並將繼續為 React Native 投資。 其好處顯而易見：減少了人力、節省了時間、避免了 iOS 與 Android 版本發布的時間差，開發新功能可以更迅速。 下面，我們可以嘗試用React Native創建一個 iOS APP. 在我們開始之前，我建議：你可以在 Github 里先下載 React Native 的代碼框架。裡面還有一些示例項目，2048 的游戲， Movies（一個看電影的 APP）,SampleApp, TicTacToe (一款游戲)和 UIExplorer（能顯示出所有用 React Native 替代的控制項，如ListView，TabBar，MapView, Slider）），對於學慣用如何用 React Native 創建 UI,這些都是非常好的例子,尤其是 UIExplorer APP，它幾乎用到了每一個您的 APP 中需要創建的 UI 控制項。 回答不容易,希望能幫到您,滿意請幫忙採納一下，謝謝
B. react native android dev setting怎麼配置
一，設備與環境
1，一台 mac
2，安裝軟體包管理器 Homebrew(中文)
終端里輸入/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"進行安裝。
3，安裝 wget 或者 curl
wget，終端里輸入brew install wget進行安裝。
curl，終端里輸入brew install curl進行安裝。
4，安裝 nvm (node版本管理器)
如果安裝了 wget，終端輸入wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash進行安裝 nvm。
如果安裝了 curl，終端輸入curl -o- https://raw.githubusercontent.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 項目，直至安裝到手機。
C. react native android端很卡是怎麼回事
在使用React Native的時候，經常會看到這么一段代碼 var React = require('react-native');1 那麼require這個語句的作用到底是什麼呢，下面的流程提取自require() 源碼解讀 當遇到 require(X) 時，按下面的順序處理。 （1）如果 X 是內置模塊（比如 require(『http』）) a. 返回該模塊。 b. 不再繼續執行。 （2）如果 X 以 「./」 或者 「/」 或者 「../」 開頭 a. 根據 X 所在的父模塊，確定 X 的絕對路徑。 b. 將 X 當成文件，依次查找下面文件，只要其中有一個存在，就返回該文件，不再繼續執行。 X X.js X.json X.node c. 將 X 當成目錄，依次查找下面文件，只要其中有一個存在，就返回該文件，不再繼續執行。 X/package.json（main欄位） X/index.js X/index.json X/index.node （3）如果 X 不帶路徑 a. 根據 X 所在的父模塊，確定 X 可能的安裝目錄。 b. 依次在每個目錄中，將 X 當成文件名或目錄名載入。 （4） 拋出 「not found」 以上就是require語句的整個執行過程。那麼require(『react-native』);請求的到底是什麼呢，其實就是node_moles\react-native\Libraries\react-native\react-native.js這個文件，該文件中導出了一些常用的組件，
D. 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了解學習。
E. react native怎麼開發android
安裝Git
在Mac上，如果您已安裝XCode，則已安裝Git，否則運行以下命令：
brew install git
在Linux上，通過軟體包管理器安裝Git。
在Windows上，下載並安裝Git for Windows。在安裝過程中，選擇「從Windows命令提示符運行Git」，這將添加Git到您的PATH環境變數。
安裝Android SDK（除非您已經擁有它）
安裝最新的JDK
安裝Android SDK：
在Mac上：brew install android-sdk
在Linux和Windows上：從Android網站下載
定義ANDROID_HOME環境變數
重要信息：確保ANDROID_HOME環境變數指向現有的Android SDK：
在Mac上，將其添加到〜/ .bashrc，〜/ .bash_profile或您的shell使用的任何內容：
＃如果你通過Homebrew安裝了SDK，否則〜/ Library / Android / sdk
export ANDROID_HOME = / usr / local / opt / android-sdk
在Linux上，將其添加到〜/ .bashrc，〜/ .bash_profile或您的shell使用的任何內容：
export ANDROID_HOME = <path_where_you_unpacked_android_sdk>
在Windows上，轉到控制面板 - >系統和安全 - >系統 - >更改設置 - >高級 - >環境變數 - >新建
注意：您需要重新啟動命令提示符（Windows）/終端模擬器（Mac OS X，Linux）以應用新的環境變數。
使用gradle守護進程
React Native Android使用gradle作為構建系統。我們建議啟用gradle守護程序功能，這可能會導致Java代碼更改的增量構建時間增加50％。了解如何為您的平台啟用它。
配置您的SDK
打開Android SDK Manager（在Mac上啟動一個新的shell並運行android）;在出現的窗口中確保您檢查：
Android SDK Build-tools版本23.0.1
Android 6.0（API 23）
支持庫的本地Maven存儲庫（這在舊版本中稱為Android支持存儲庫）
點擊「安裝軟體包」
SDK管理器窗口SDK管理器窗口
安裝Genymotion
Genymotion比谷歌模擬器容易設置。但是，它是免費的個人使用。如果你想使用股票Google模擬器，請參閱下文。
下載並安裝Genymotion。
打開Genymotion。它可能會要求您安裝VirtualBox，除非您已經擁有它。
創建一個新的模擬器並啟動它。
要顯示開發人員菜單，請按⌘+ M
替代方法：創建庫存Google模擬器
啟動一個新的shell並運行android;在出現的窗口中確保您檢查：
Intel x86 Atom系統映像（適用於Android 5.1.1 - API 22）
英特爾x86模擬器加速器（HAXM安裝程序）
單擊「安裝軟體包」。
配置硬體加速（HAXM），否則模擬器會變慢（或可能根本不運行）。
在mac上，這通常需要打開：/usr/local/opt/android-sdk/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM_<version>.dmg並在其中安裝軟體包。
創建Android虛擬設備（AVD）：
運行android avd並單擊創建...創建AVD對話框
選擇新的AVD後，單擊開始...
要顯示開發者菜單，請按F2（或安裝Frappé）
Windows Hyper-V替代
Android的Visual Studio模擬器是一個免費的Android模擬器，通過Hyper-V硬體加速。它不需要你安裝Visual Studio。
要使用它與react-native你只需要添加一個鍵和值到您的注冊表：
打開運行命令（Windows + R）
輸入regedit.exe
在注冊表編輯器中導航到HKEY_LOCAL_MACHINE \ SOFTWARE \ Wow6432Node \ Android SDK工具
右鍵單擊Android SDK工具，然後選擇新建>字元串值
將名稱設置為路徑
雙擊新的路徑鍵，並將值設置為C：\ Program Files \ Android \ sdk。路徑值可能在您的計算機上不同。
您還需要使用此模擬器運行命令adb reverse tcp：8081 tcp：8081。
然後重新啟動模擬器，當它運行你可以只是做一樣反應原生run-android像往常一樣。
在Android Studio中編輯應用程式的Java程式碼
您可以使用任何編輯器編輯JavaScript。如果您想使用Android Studio來處理本機代碼，請從Android Studio的「歡迎」屏幕選擇「導入項目」並選擇您的應用程序的Android文件夾。
故障排除
萬一你遇到
任務'：app：installDebug'的執行失敗。
com.android.builder.testing.api.DeviceException：com.android.ddmlib.
嘗試將您的Gradle版本降級到1.2.3在<project-name> /android/build.gradle（https://github.com/facebook/react-native/issues/2720）
F. 如何愉快地調試一個 React Native for Android APP
首先確保你的電腦和手機設備在同一個Wi-Fi環境下。其次你需要開啟USB調試才能在你的設備上安裝你的APP。一定要確定你已經打開設備的USB調試開關!確保你的設備已經被成功連接，可以輸入adbdevices核實:在右邊那列看到device說明你的設備已經被正確連接了。注意，你只應當連接僅僅一個設備。因為如果你連接了多個設備（包含模擬器在內），你後續的一些操作可能會失敗。拔掉不需要的設備，或者關掉模擬器，確保adbdevices的輸出只有一個是連接狀態。現在我們可以運行react-nativerun-android來在設備上安裝並啟動我們的應用了這句命令執行後，實際上就是在本地起一個nodeserver，並且將你的androidproject編譯打包，再上傳到你的手機上。然後當js文件有改動或debug模式下手動選擇reloadjs時候會自動更新bundle文件，達到改動js文件後即時顯示的調試效果。這「紅屏」又是什麼鬼？別著急，是正常的，我們需要連接上開發伺服器，下面的步驟會解決這個問題。搖晃手機，或者運行adbshellinputkeyevent82，可以調出開發者菜單。點擊進入DevSettings點擊Debugserverhostfordevice輸入你電腦的IP地址和埠號（譬如我的是192.168.3.15:8081）注意：如果你的設備是android5.0以上版本(API21+)，就不用折騰這步了而是：運行adbreversetcp:8081tcp:8081（建立一個從設備向電腦轉發的埠，前提是設備和電腦通過USB相連）不需要配置，你就可以使用ReloadJS和其它的開發選項了Chrome開發者工具在Chrome上調試js代碼，需要在開發菜單中選擇DebugJS，這會打開一個新的debugger-uitab頁。在Chrome中，按下⌘+option+i或者選擇視圖(View)->開發者(Developer)->開發工具(DeveloperTools)來打開開發工具控制台。打開有異常時暫停（PauseOnCaughtExceptions）選項，能夠獲得更好的開發體驗。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也可以起一個nodeserver，只是它不幫你安裝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，在界面跳轉時卡的令人發指
G. React-Native-Android怎麼封裝原生組件
參考如下內容：首先在Android中嵌入ReactNative：每一個AndroidStudioproject下包含多個mole，所以，從命令行進入到mole根目錄，運行：[plain]viewplain$npminit$npminstall--savereact-native$curl-o.flowconfig/facebook/react-native/master/.flowconfig上述命令會創建一些react-native依賴的一些模塊，在package.json文件的scripts屬性中添加：[javascript]viewplain"start":"nodenode_moles/react-native/local-cli/cli.jsstart"註：如果scripts中存在其他鍵值對，則以逗號為分隔符。在mole的根目錄創建index.android.js文件，並將一下內容下入index.android.js文件：[javascript]viewplain'usestrict';importReactfrom'react';import{AppRegistry,StyleSheet,Text,View}from'react-native';classHelloWorldextendsReact.Component{render(){return(Hello,World)}}varstyles=StyleSheet.create({container:{flex:1,justifyContent:'center',},hello:{fontSize:20,textAlign:'center',margin:10,},});AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);在AndroidStudio中，在moudle的build.gradle文件中添加一下內容：[javascript]viewplainallprojects{repositories{maven{//AllofReactNative(JS,Androidbinaries)isinstalledfromnpmurl"$rootDir/node_moles/react-native/android"}}}在AndroidManifest.xml文件中添加網路訪問許可權（僅在開發或調試中需要該許可權）：
H. React-Native-Android怎麼封裝原生組件
提供原生視圖很簡單：
創建一個ViewManager的子類（或者更常見的，SimpleViewManage的派生類）。
實現createViewInstance方法。
導出視圖的屬性設置器：使用@ReactProp（或@ReactPropGroup）註解。
把這個視圖管理類注冊到應用程序包的createViewManagers里。
實現JavaScript模塊。
在開始之前，先創建一個工程，命令如下：
React-native init NativeView
第一步. 創建ViewManager的子類MyTextViewManager
第二步.實現方法createViewInstance
第三步. 通過@ReactProp（或@ReactPropGroup）註解來導出屬性的設置方法
上面三步中MyTextViewManager的整個代碼如下：
public class MyTextViewManager extends SimpleViewManager<TextView> {
@Override
public String getName() {
return "MyTextView";
}
@Override
protected TextView createViewInstance(ThemedReactContext reactContext) {
TextView textView = new TextView(reactContext);
return textView;
}
@ReactProp(name = "text")
public void setText(TextView view, String text) {
view.setText(text);
}
@ReactProp(name = "textSize")
public void setTextSize(TextView view, float fontSize) {
view.setTextSize(fontSize);
}
@ReactProp(name = "textColor", defaultInt = Color.BLACK)
public void setTextColor(TextView view, int textColor) {
view.setTextColor(textColor);
}
@ReactProp(name = "isAlpha", defaultBoolean = false) public void setTextAlpha(TextView view, boolean isAlpha) {
if (isAlpha) {
view.setAlpha(0.5f); }
}}
第四步：注冊MyTextViewManager。
創建類MyReactPackage，實現ReactPackage的方法createViewManager，在該方法中注冊上面的組件MyTextViewManager。實現ReactPackage時，需要實現這三個方法，學過導入原生模塊部分時我們應該很熟悉了。封裝的原生模塊放在createNativeMoles里，封裝的原生UI組件放在createViewManagers里。需要注意的是剩下的最後一個方法createJSMoles里默認是返回null，要改成返回空集合，否則編譯時會報錯。
代碼如下：
public class MyReactPackage implements ReactPackage {
@Override
public List<NativeMole> createNativeMoles(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
@Override
public List<Class<? extends JavaScriptMole>> createJSMoles() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new MyTextViewManager()
);
}
}
MyReactPackage還需要在MainApplication.java文件的getPackages方法中提供。這個文件位於你的react-native應用文件夾的android目錄中。具體路徑是: android/app/src/main/java/com/your-app-name/MainApplication.java.
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyReactPackage()
);
}
第五步：實現對應的JS模塊。
最後一步就是創建JavaScript模塊並且定義Java和JavaScript之間的介面層。大部分過程都由React底層的Java和JavaScript代碼來完成，你所需要做的就是通過propTypes來描述屬性的類型。
新建一個MyTextView.js文件。代碼如下：
import { PropTypes } from 'react';
import {requireNativeComponent,View} from'react-native';
var myTextView ={
name:'MyTextView',
propTypes:{
text:PropTypes.string,
textSize:PropTypes.number,
textColor:PropTypes.number,
isAlpha:PropTypes.bool,
...View.propTypes // 包含默認的View的屬性
}
}
mole.exports =requireNativeComponent('MyTextView',myTextView);
最後：然後你就可以在js代碼中引用剛才的組件了，