React Native允許您僅使用JavaScript構建移動應用程序。它使用與React相同的設計,允許您從聲明性組件組成豐富的移動UI。
使用React Native,您不會構建“移動Web應用程序”,“HTML5應用程序”或“混合應用程序”。您構建了一個真正的移動應用程序,它與使用Objective-C或Java構建的應用程序無法區分。 React Native使用與常規iOS和Android應用程序相同的基本UI構建塊。您只需使用JavaScript和React將這些構建塊放在一起。
它是開源的,由Facebook維護。
資料來源: React Native網站
1)設置Node.JS
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
要么
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v
sudo npm install -g react-native-cli
2)設置Java
sudo apt-get install lib32stdc++6 lib32z1 openjdk-7-jdk
3)設置Android Studio:
http://developer.android.com/sdk/index.html
export ANDROID_HOME=/YOUR/LOCAL/ANDROID/SDK
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
4)安裝模擬器:
在終端上運行命令
android
從SDK Manager中選擇“SDK平台”,您會看到“Android 7.0(Nougat)”旁邊的藍色複選標記。如果不是,請單擊複選框,然後單擊“應用”。
5)開始一個項目
react-native init ReactNativeDemo && cd ReactNativeDemo
android/app/build.gradle
上的版本是否與Android SDK上下載的Build Tools相同android {
compileSdkVersion XX
buildToolsVersion "XX.X.X"
...
6)運行項目
android avd
按照說明創建虛擬設備並啟動它
打開另一個終端並運行命令行:
react-native run-android
react-native start
安裝包管理器Homebrew brew
將其粘貼到終端提示符處。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安裝Xcode IDE
使用下面的鏈接下載或在Mac App Store中找到它
https://developer.apple.com/download/
注意:如果您安裝了Xcode-beta.app以及Xcode.app的生產版本, 請確保您使用的是
xcodebuild
工具的生產版本。你可以用:
sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer/
安裝Android環境
Git git
*如果您已安裝XCode,則已安裝Git,否則請運行以下命令
brew install git
選擇自定義安裝
選擇性能和Android虛擬設備
安裝完成後,從Android Studio歡迎窗口中選擇Configure - > SDK Manager。
在SDK平台窗口中,選擇顯示包詳細信息,然後在Android 6.0(Marshmallow)下,確保選中Google API,Intel x86 Atom System Image,Intel x86 Atom_64系統映像和Google API Intel x86 Atom_64系統映像。
在SDK Tools窗口中,選擇Show Package Details,在Android SDK Build Tools下,確保選中Android SDK Build-Tools 23.0.1。
環境變量ANDROID_HOME
確保ANDROID_HOME環境變量指向您現有的Android SDK。為此,將其添加到〜/ .bashrc,〜/ .bash_profile(或shell使用的任何內容)並重新打開終端:
如果您在沒有Android Studio的情況下安裝了SDK,那麼它可能類似於:/ usr / local / opt / android-sdk
export ANDROID_HOME=~/Library/Android/sdk
Mac的依賴關係
你需要Xcode for iOS和Android Studio for android,node.js,React Native命令行工具和Watchman。
我們建議通過Homebrew安裝node和watchman。
brew install node
brew install watchman
Watchman是Facebook用於觀察文件系統變化的工具。強烈建議您安裝它以獲得更好的性能。這是可選的。
Node附帶npm,允許您安裝React Native命令行界面。
npm install -g react-native-cli
如果您收到權限錯誤,請嘗試使用sudo:
sudo npm install -g react-native-cli.
對於iOS,安裝Xcode的最簡單方法是通過Mac App Store。並為Android下載並安裝Android Studio。
如果您打算在Java代碼中進行更改,我們建議使用Gradle Daemon加速構建。
測試React Native安裝
使用React Native命令行工俱生成名為“AwesomeProject”的新React Native項目,然後在新創建的文件夾中運行react-native run-ios。
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
您很快就會看到您的新應用在iOS模擬器中運行。 react-native run-ios只是運行應用程序的一種方式 - 您也可以直接從Xcode或Nuclide中運行它。
修改您的應用
現在您已經成功運行了應用程序,讓我們對其進行修改。
恭喜!您已成功運行並修改了第一個React Native應用程序。
注意:您無法在Windows上為iOS開發react-native應用程序,只能在本機安卓應用程序中進行反應。
可以在此處找到 Windows上的react-native官方設置文檔。如果您需要更多詳細信息,請在此處提供詳細指南 。
工具/環境
1)設置您的機器以進行本機開發
以管理員身份啟動命令行運行以下命令:
choco install nodejs.install
choco install python2
以管理員身份重新啟動命令行,以便運行npm
npm install -g react-native-cli
運行最後一個命令後,複製安裝了react-native的目錄。步驟4中需要這個。我在兩台計算機上嘗試過這種情況,例如: C:\Program Files (x86)\Nodist\v-x64\6.2.2
。在另一個是: C:\Users\admin\AppData\Roaming\npm
2)設置環境變量
通過導航到以下命令打開“環境變量”窗口:
[右鍵單擊]“開始”菜單 - >系統 - >高級系統設置 - >環境變量
在底部找到“Path”系統變量,並在步驟1中添加react-native的安裝位置。
如果您還沒有添加ANDROID_HOME環境變量,那麼您也必須在此處執行此操作。仍然在“環境變量”窗口中,添加一個名為“ANDROID_HOME”的新系統變量,並將值作為android sdk的路徑。
然後以管理員身份重新啟動命令行,以便在其中運行react-native命令。
3)創建項目在命令行中,導航到要放置項目的文件夾並運行以下命令:
react-native init ProjectName
4)運行項目從android studio啟動模擬器在命令行中導航到項目的根目錄並運行它:
cd ProjectName
react-native run-android
您可能會遇到依賴性問題。例如,可能存在錯誤,即您沒有正確的構建工具版本。要解決此問題,您必須在Android Studio中打開sdk管理器並從那裡下載構建工具。
恭喜!
要刷新ui,您可以在模擬器中運行應用程序兩次按r
鍵。要查看開發人員選項,您可以按ctrl + m
。