[轉]react native環境

歡迎使用 React Native！這篇文檔會幫助你搭建基本的 React Native 開發環境。如果你已經搭好了環境，那么可以嘗試一下編寫 Hello World。

完整原生環境

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you "ejected" from?Create React Native App, you'll need this section.

根據你所使用的操作系統、針對的目標平臺不同，具體步驟有所不同。如果想同時開發 iOS 和 Android 也沒問題，你只需要先選一個平臺開始，另一個平臺的環境搭建只是稍有不同。

如果閱讀完本文檔后還碰到很多環境搭建的問題，我們建議你還可以再看看由本站提供的環境搭建視頻教程(macOS iOS、macOS Android、windows Android)、windows 環境搭建文字教程、以及常見問題。注意！視頻教程或者其他網絡上的博客和文章可能和本文檔有所出入，請以最新版本的本文檔所述為準！

開發平臺：?macOS?Windows?Linux?目標平臺：?iOS?Android

安裝依賴

必須安裝的依賴有：Node、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

雖然你可以使用任何編輯器來開發應用（編寫 js 代碼），但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。

Node, Python2, JDK

我們建議直接使用搜索引擎搜索下載 Node 、Python2 和Java SE Development Kit (JDK)

注意 Node 的版本必須高于 8.3，Python 的版本必須為 2.x（不支持 3.x），而 JDK 的版本必須是 1.8（目前不支持 1.9 及更高版本）。安裝完 Node 后建議設置 npm 鏡像以加速后面的過程（或使用科學上網工具）。

注意：不要使用 cnpm！cnpm 安裝的模塊路徑比較奇怪，packager 不能正常識別！

npm?config?set?registry?https://registry.npm.taobao.org?--globalnpm?config?set?disturl?https://npm.taobao.org/dist?--global

Yarn、React Native 的命令行工具（react-native-cli）

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模塊的下載。React Native 的命令行工具用于執行創建、初始化、更新項目、運行打包服務（packager）等任務。

npm?install?-g?yarn?react-native-cli

安裝完 yarn 后同理也要設置鏡像源：

yarn?config?set?registry?https://registry.npm.taobao.org?--globalyarn?config?set?disturl?https://npm.taobao.org/dist?--global

安裝完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方庫名代替npm install 某第三方庫名。

Android 開發環境

如果你之前沒有接觸過 Android 的開發環境，那么請做好心理準備，這一過程相當繁瑣。請萬分仔細地閱讀下面的說明，嚴格對照文檔進行配置操作。

譯注：請注意?。?！國內用戶必須必須必須有穩定的翻墻工具，否則在下載、安裝、配置過程中會不斷遭遇鏈接超時或斷開，無法進行開發工作。某些翻墻工具可能只提供瀏覽器的代理功能，或只針對特定網站代理等等，請自行研究配置或更換其他軟件?？傊绻麍箦e中出現有網址，那么 99% 就是無法正常翻墻。

首先下載和安裝 Android Studio，國內用戶可能無法打開官方鏈接，請自行使用搜索引擎搜索可用的下載鏈接。安裝界面中選擇"Custom"選項，確保選中了以下幾項：

Android SDK

Android SDK Platform

Performance (Intel ? HAXM)

Android Virtual Device

然后點擊"Next"來安裝選中的組件。

如果選擇框是灰的，你也可以先跳過，稍后再來安裝這些組件。

安裝完成后，看到歡迎界面時，就可以進行下面的操作了。

Android Studio 默認會安裝最新版本的 Android SDK。目前編譯 React Native 應用需要的是Android 8.1 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中選擇安裝各版本的 SDK。

你可以在 Android Studio 的歡迎界面中找到 SDK Manager。點擊"Configure"，然后就能看到"SDK Manager"。

SDK Manager 還可以在 Android Studio 的"Preferences"菜單中找到。具體路徑是Appearance & Behavior?→?System Settings?→?Android SDK。

在 SDK Manager 中選擇"SDK Platforms"選項卡，然后在右下角勾選"Show Package Details"。展開Android 8.1 (Oreo)選項，確保勾選了下面這些組件（重申你必須使用穩定的翻墻工具，否則可能都看不到這個界面）：

Android SDK Platform 27

Intel x86 Atom_64 System Image（官方模擬器鏡像文件，使用非官方模擬器不需要安裝此組件）

然后點擊"SDK Tools"選項卡，同樣勾中右下角的"Show Package Details"。展開"Android SDK Build-Tools"選項，確保選中了 React Native 所必須的27.0.3版本。你可以同時安裝多個其他版本。

最后點擊"Apply"來下載和安裝這些組件。

React Native 需要通過環境變量來了解你的 Android SDK 裝在什么路徑，從而正常進行編譯。

打開控制面板?->?系統和安全?->?系統?->?高級系統設置?->?高級?->?環境變量?->?新建，創建一個名為ANDROID_HOME的環境變量（系統或用戶變量均可），指向你的 Android SDK 所在的目錄（具體的路徑可能和下圖不一致，請自行確認）：

SDK 默認是安裝在下面的目錄：

c:\Users\你的用戶名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜單中查看 SDK 的真實路徑，具體是Appearance & Behavior?→?System Settings?→?Android SDK。

你需要關閉現有的命令符提示窗口然后重新打開，這樣新的環境變量才能生效。

創建新項目

使用 React Native 命令行工具來創建一個名為"AwesomeProject"的新項目：

react-native run-android只是運行應用的方式之一。你也可以在 Android Studio 或是Nuclide中直接運行應用。

譯注：建議在run-android成功后再嘗試使用 Android Studio 啟動。請不要輕易點擊 Android Studio 中可能彈出的建議更新項目中某依賴項的建議，否則可能導致無法運行。

如果你無法正常運行，遇到奇奇怪怪的紅屏錯誤，先回頭仔細對照文檔檢查，然后可以看看論壇的求助專區。不同時期不同版本可能會碰到不同的問題，我們會在論壇中及時解答更新。但請注意千萬不要執行 bundle 命令，那樣會導致代碼完全無法刷新。

修改項目

現在你已經成功運行了項目，我們可以開始嘗試動手改一改了：

使用你喜歡的文本編輯器打開App.js并隨便改上幾行

按兩下 R 鍵，或是在開發者菜單中選擇?Reload JS，就可以看到你的最新修改。

完成了！

恭喜！你已經成功運行并修改了你的第一個 React Native 應用。

接下來？

試著在開發者菜單中打開Live Reload，現在你只要一保存代碼應用就會自動完整刷新。

如果你想把 React Native 集成到現有的原生項目中，則請參考集成到現有原生應用。

如果你想從頭開始學習 React Native 開發，可以從嘗試編寫 Hello World開始。

簡易沙盒環境

譯注：沙盒環境大量依賴于國外網絡環境，也不能直接發布應用，只是用于學習、演示、試驗等目的。不建議國內用戶使用。

Create React Native App?is the easiest way to start building a new React Native application. It allows you to start a project without installing or configuring any tools to build native code - no Xcode or Android Studio installation required (see?Caveats).

Assuming that you have?Node?installed, you can use npm to install the?create-react-native-app?command line utility:

npm?install?-g?create-react-native-app

Then run the following commands to create a new React Native project called "AwesomeProject":

create-react-native-app?AwesomeProjectcd?AwesomeProjectnpm?start

This will start a development server for you, and print a QR code in your terminal.

Running your React Native application

Install the?Expo?client app on your iOS or Android phone and connect to the same wireless network as your computer. Using the Expo app, scan the QR code from your terminal to open your project.

Modifying your app

Now that you have successfully run the app, let's modify it. Open?App.js?in your text editor of choice and edit some lines. The application should reload automatically once you save your changes.

That's it!

Congratulations! You've successfully run and modified your first React Native app.

Now what?

Create React Native App also has a?user guide?you can reference if you have questions specific to the tool.

If you can't get this to work, see the?Troubleshooting?section in the README for Create React Native App.

If you're curious to learn more about React Native, continue on to the?Tutorial.

Running your app on a simulator or virtual device

Create React Native App makes it really easy to run your React Native app on a physical device without setting up a development environment. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for building projects with native code to learn how to install Xcode and set up your Android development environment.

Once you've set these up, you can launch your app on an Android Virtual Device by running?npm run android, or on the iOS Simulator by running?npm run ios?(macOS only).

Caveats

Because you don't build any native code when using Create React Native App to create a project, it's not possible to include custom native modules beyond the React Native APIs and components that are available in the Expo client app.

If you know that you'll eventually need to include your own native code, Create React Native App is still a good way to get started. In that case you'll just need to "eject" eventually to create your own native builds. If you do eject, the "Building Projects with Native Code" instructions will be required to continue working on your project.

Create React Native App configures your project to use the most recent React Native version that is supported by the Expo client app. The Expo client app usually gains support for a given React Native version about a week after the React Native version is released as stable. You can check?this document?to find out what versions are supported.

If you're integrating React Native into an existing project, you'll want to skip Create React Native App and go directly to setting up the native build environment. Select "Building Projects with Native Code" above for instructions on configuring a native build environment for React Native.

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。