反應原生入門

備註

React Native允許您僅使用JavaScript構建移動應用程序。它使用與React相同的設計，允許您從聲明性組件組成豐富的移動UI。

使用React Native，您不會構建“移動Web應用程序”，“HTML5應用程序”或“混合應用程序”。您構建了一個真正的移動應用程序，它與使用Objective-C或Java構建的應用程序無法區分。 React Native使用與常規iOS和Android應用程序相同的基本UI構建塊。您只需使用JavaScript和React將這些構建塊放在一起。

它是開源的，由Facebook維護。

_{資料來源： React Native網站}

Linux安裝程序（Ubuntu）

1）設置Node.JS

啟動終端並運行以下命令以安裝nodeJS：

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

如果node命令不可用

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

替代方案NodeJS instalations：

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

要么

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

檢查您是否擁有當前版本

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

運行npm以安裝react-native

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

2）設置Java

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

3）設置Android Studio：

Android SDK或Android Studio

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Android SDK e ENV

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

4）安裝模擬器：

在終端上運行命令

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

從SDK Manager中選擇“SDK平台”，您會看到“Android 7.0（Nougat）”旁邊的藍色複選標記。如果不是，請單擊複選框，然後單擊“應用”。

5）開始一個項目

示例app init

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Obs：總是檢查`android/app/build.gradle` 上的版本是否與Android SDK上下載的Build Tools相同

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

6）運行項目

打開Android AVD來設置虛擬機器人。執行命令行：

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

按照說明創建虛擬設備並啟動它

打開另一個終端並運行命令行：

curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -

sudo apt-get install nodejs

Mac的安裝程序

安裝包管理器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，否則請運行以下命令

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

最新的JDK
Android Studio
選擇自定義安裝

選擇性能和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
```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
 
```

Mac的依賴關係

你需要Xcode for iOS和Android Studio for android，node.js，React Native命令行工具和Watchman。

我們建議通過Homebrew安裝node和watchman。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Watchman是Facebook用於觀察文件系統變化的工具。強烈建議您安裝它以獲得更好的性能。這是可選的。

Node附帶npm，允許您安裝React Native命令行界面。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

如果您收到權限錯誤，請嘗試使用sudo：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

對於iOS，安裝Xcode的最簡單方法是通過Mac App Store。並為Android下載並安裝Android Studio。

如果您打算在Java代碼中進行更改，我們建議使用Gradle Daemon加速構建。

測試React Native安裝

使用React Native命令行工俱生成名為“AwesomeProject”的新React Native項目，然後在新創建的文件夾中運行react-native run-ios。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

您很快就會看到您的新應用在iOS模擬器中運行。 react-native run-ios只是運行應用程序的一種方式 - 您也可以直接從Xcode或Nuclide中運行它。

修改您的應用

現在您已經成功運行了應用程序，讓我們對其進行修改。

在您選擇的文本編輯器中打開index.ios.js或index.android.js並編輯一些行。
在iOS模擬器中點擊Command⌘+ R重新加載應用程序並查看更改！而已！

恭喜！您已成功運行並修改了第一個React Native應用程序。

_{來源：入門 - React-Native}

Windows安裝程序

注意：您無法在Windows上為iOS開發react-native應用程序，只能在本機安卓應用程序中進行反應。

可以在此處找到 Windows上的react-native官方設置文檔。如果您需要更多詳細信息，請在此處提供詳細指南。

工具/環境

Windows 10
命令行工具（例如Powershell或Windows命令行）
Chocolatey （通過PowerShell設置的步驟）
JDK（版本8）
Android Studio
為HAXM啟用虛擬化技術的Intel計算機（可選，僅在您要使用模擬器時才需要）

1）設置您的機器以進行本機開發

以管理員身份啟動命令行運行以下命令：

choco install nodejs.install
choco install python2

以管理員身份重新啟動命令行，以便運行npm

choco install nodejs.install
choco install python2

運行最後一個命令後，複製安裝了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）創建項目在命令行中，導航到要放置項目的文件夾並運行以下命令：

choco install nodejs.install
choco install python2

4）運行項目從android studio啟動模擬器在命令行中導航到項目的根目錄並運行它：

choco install nodejs.install
choco install python2

您可能會遇到依賴性問題。例如，可能存在錯誤，即您沒有正確的構建工具版本。要解決此問題，您必須在Android Studio中打開sdk管理器並從那裡下載構建工具。

恭喜！

要刷新ui，您可以在模擬器中運行應用程序兩次按r 鍵。要查看開發人員選項，您可以按ctrl + m 。

react-native