反應原生入門

Download react-native eBook

備註

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虛擬設備

    安裝完成後,從Android Studio歡迎窗口中選擇Configure - > SDK Manager。

    選擇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平台窗口

    在SDK Tools窗口中,選擇Show Package Details,在Android SDK Build Tools下,確保選中Android SDK Build-Tools 23.0.1。

    SDK工具窗口

  • 環境變量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

Stats

876 Contributors: 14
Monday, April 10, 2017
許可下: CC-BY-SA

不隸屬於 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下載電子書