React-Native入門指導之iOS篇 —— 1、準備工做

React-Native 入門指導系列教程目錄

1、準備工做 (已完成)

2、項目介紹與調試

3、CSS樣式與Flex佈局

4、經常使用UI控件的使用

5、JSX在React-Native中的應用

6、事件與數據調用

7、自定義組件

8、動手寫實例

9、發佈與真機調試

 

寫在前面

1. 什麼是React-Native？

　　

　　React-Native是：Facebook 在2015年初React.js技術研討大會上公佈的一個開源項目。支持用開源的JavaScript庫React.js來開發iOS和Android原生App。初期僅支持iOS平臺，同年9月份，該開源項目同時支持Android平臺。

　　React Native的原理是：在JavaScript中用React抽象操做系統原生的UI組件，代替DOM元素來渲染，好比以<View>取代<div>，以<Image>替代<img>等。

 

2.React-Native有啥優缺點？

　　優勢是：可以用JavaScript腳本就能夠寫出App的界面，對從事Web開發的同事們轉行作幾個簡單的移動App是個福利。不用爲了寫個移動App小程序而專門去學習Objective-C和Swift。

和其餘的移動Web框架相比：

• Native不用WebView，完全擺脫了WebView讓人不爽的交互和性能問題；
• Native的原生控件有更好的體驗；
• Native有更好的手勢識別；
• Native有更適合的線程模型；

　　缺點是：還在試用階段，潛在的問題尚不得而知：兼容性問題，性能問題等。還沒大量普及，學習資料尚且很少，供愛折騰的朋友嚐嚐鮮。

 

3.成功案例有哪些？

　　那麼，如今有哪些公司在用這個新出來的技術呢？據瞭解，有些國內走在技術前沿的公司已經開始在試用React.js開發項目了。

　　天貓iPad客戶端「猜你喜歡」業務，支付寶新一代的框架基於React；攜程網App部分新業務；去哪兒網給航空公司用的收益輔助系統；百度圖片搜索無線的新首頁，部分試水；Quip 最好用的在線文檔協做工具……

　　

4.要學些什麼？

　　想必，你們已經按耐不住，會發問，使用React-Native開發要學習些什麼呢？

• Html+CSS+JavaScript的基本功確定是少不了；
• Node.js的基本概念學習。API文檔：https://nodejs.org/dist/v4.2.2/docs/api/
• JSX: JavaScript語法的一個擴展，相似XML結構。https://facebook.github.io/react/docs/jsx-in-depth.html
• FLUX: Facebook公司的一個建立用戶客戶端web程序的框架。https://facebook.github.io/flux/docs/overview.html

　　好了，廢話很少，直入正題吧。

 

環境配置

1. 硬件條件

　　你須要一臺Mac電腦，或者是安裝了OSX系統的電腦，這是iOS App開發的前提。

 

2. 軟件條件

(1). 安裝最新版的XCode，建議是XCode7.1及以上版本。（PS: 若是不是最新版，可能在以後新建項目的時候，會編譯通不過。小編就是以前沒把XCode升級到最新版，而後被一個編譯問題困擾了好久。）

(2). 安裝HomeBlew（OS系統上的一個安裝包管理器，安裝後能夠方便後續安裝包的安裝。）

終端命令：

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

(3). 安裝Node.js （服務端的JavaScript運行環境）

下載地址： https://nodejs.org/download/

成功安裝後，終端會有以下提示信息：

Node.js was installed at: /usr/local/bin/node 

npm was installed at: /usr/local/bin/npm 

Make sure that /usr/local/bin is in your $PATH.

(4). 建議安裝WatchMan（React修改source文件的一個工具）

終端命令： 

brew install watchman

(5). 安裝Flow: 一個JavaScript 的靜態類型檢查器。

終端命令：

brew install flow

(6). 安裝React Native CLI: 用來開發React Native的命令行工具

終端命令：

npm install -g react-native

裝好了環境，就能夠愉快的玩耍起來了。

 

建立項目
1. 新建一個項目

　　新建一個「HelloWorld」的項目，每一個語言的開始教程都是這個，咱們也不例外。

操做超級簡單，只需終端輸入命令行：

react-native init HelloWorld 

 

2. 運行項目

　　建立的項目包含Andriod和iOS兩個版本，咱們這邊就先介紹iOS的操做。(Andriod的操做也大同小異，無非就是編譯的環境不一樣，js文件中的內容和寫法都是通用的。學會了iOS的用法，再研究Andriod下的React-Native開發，會很輕鬆。)

　　

　　用XCode打開ios/HelloWorld.xcodeproj文件，點擊鍵盤"⌘-R」或者點擊"Run"，編譯運行項目。會啓動React-Native服務和iOS模擬器。

　　在iOS模擬器中能夠看到如圖界面：

　　

　　React-Native服務在編寫過程當中要一直開着，如圖：

　　

　　若是不當心把它關了，不要緊，能夠在終端輸入：

npm start

來從新開啓服務。

 

如何調試

　　安裝谷歌的Chrome Developer Tools，具體使用方法，在以後的教程中會再具體介紹。

參考文章： https://facebook.github.io/react-native/docs/debugging.html

 

寫在最後

　　好了，看到這裏，若是你已經成功配置了React-Native的環境，而且新建併成功運行了第一個程序了。那麼，就先恭喜了，咱們甚至沒有寫一行代碼，就已經成功運行了第一個React-Native的程序，是否是還挺簡單的。正所謂，良好的開端是成功的一半。

　　在接下來的一篇文章中，我會和你們一塊兒來具體看看自動新建項目中包括的內容，以及每一個文件中具體寫法和做用。

 

附上facebook官方的教程網站地址，供你們研究學習： https://facebook.github.io/react-native/docs/getting-started.html