React Native建立一個APP

React Native 結合了 Web 應用和 Native 應用的優點，可使用 JavaScript 來開發 iOS 和 Android 原生應用。在 JavaScript 中用 React 抽象操做系統原生的 UI 組件，代替 DOM 元素來渲染等。

React Native的優勢：
1.跨平臺，兼容Web、iOS、Android三大主流平臺
2.React調用原生控件，性能優於H5框架
3.更好的手勢識別
4.實時部署更新，不再擔憂應用市場審查緩慢
設計理念：既擁有Native的用戶體驗，又能保留React的開發效率。

Facebook官方使用React Native開發的應用：Groups/Ads Manager/F8/Adverts Manger
官方參考教程網站：facebook.github.io/react-native/
其餘參考教程：wiki.jikexueyuan.com/project/react-native/homepage.html

React Native代碼框架示例下載：https://github.com/facebook/react-native

 

搭建React Native開發環境：

（注意：必須是Mac系統。。。）

1.首先下載安裝nodejs：https://nodejs.org/en/

安裝node.js和npm，其中nvm是node.js的一個版本管理器

# brew install nvm
# mkdir ~/.nvm 建立nvm的工做空間
# vim ~/.bash_profile 編輯環境變量
# source $(brew --prefix nvm)nvm.sh 使生效
# nvm 檢查
# nvm install node && nvm alias default node 安裝node.js
# nvm use --delete-prefix v4.2.1

PS:以上步驟能夠不用這麼麻煩，直接去node.js官網下載安裝包安裝便可。

檢查：# node -v  和  # npm -v

 

2.而後推薦使用Homebrew 的方式來安裝 nvm，watchman 和 flow：

Homebrew是mac上的一個包管理器，到Homebrew主頁使用主頁上的那條命令進行Homebrew的安裝。

檢查Homebew:# brew -v

先安裝homebrew（參考官網）：ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

經過Homebrew 安裝 watchman 和 flow

brew install watchman
brew install flow
後面兩個命令是爲了保險起見，因此寫進去。
brew install node 
brew install nvm 

 

建議按期運行 brew update && brew upgrade 來使您的應用程序保持最新狀態。

 

3.安裝react native命令 : sudo npm install -g react-native-cli 

4.建立react native項目：

在終端，找到你但願保存的項目文件，而後運行命令：react-native init BookSearch

切換到BookSearch文件夾 

# cd BookSearch

# open BookSearch.xcodeproj

react-native init卡好久的解決辦法：

鏡像使用方法（三種辦法任意一種都能解決問題，建議使用第三種，將配置寫死，下次用的時候配置還在）：
1.經過config命令
npm config set registry https://registry.npm.taobao.org
npm info underscore (若是上面配置正確這個命令會有字符串response)
2.命令行指定
npm --registry https://registry.npm.taobao.org info underscore
3.編輯 ~/.npmrc 加入下面內容
registry = https://registry.npm.taobao.org
演示：
# cd ~/
# vim .npmrc
輸入a添加內容
點擊esc,輸入:wq保存退出

 

5.打開BookSearch下的ios啓動文件，用xcode打開再運行，會出現如下畫面：

運行項目：
iOS: 用xcode打開運行.
Android: react-native run-android.

# cd Desktop/HelloReactNative/
# react-native run-android

補充：

iOS所需環境：Xcode6.3及以上版本。
Android所需環境：
1.JDK-配置環境變量
2.Android SDK-配置環境變量
3.安裝build-tools23.0.1以上、api2三、Android Support Repository
4.安裝Intel x86 Atom System Image(若是用genymotion或真機可不安裝) 

 

React Native項目結構介紹:

首先index.android.js、index.ios.js、package.json是最主要的三個文件。android和iOS文件夾基本不會動，主要是編輯index.ios.js或者index.android.js,另外node_modules文件夾是react native的一個庫工程文件， 還有package.json是對整個工程的一些重要信息的說明，好比工程名稱、版本號等等。

我的感受代碼編輯分紅3個部分：組件聲明、佈局、組件樣式。

實戰：用React Native實現課程列表
1.實現單個課程信息展現：圖片+標題+時間
2.使用列表展現多個課程信息
3.請求網絡接口，讀取課程列表數據進行綁定展現。

 

React Native佈局:

Flexbox是css3裏邊引入的佈局模型-彈性盒子模型，旨在經過彈性的方式來對齊和分佈容器中內容的空間，使其可以適應不一樣屏幕的寬度。React Native中的Flexbox是這個規範的一個子集。

Flexbox:浮動佈局、不一樣寬度屏幕的適配、寬度自動分配、水平垂直居中

Flexbox屬性

容器屬性：

• flexDirection
• flexWrap
• alignItems
• justifyContent

元素屬性：

• flex
• alignSelf

經過StyleSheet聲明樣式 。

 

 

6.編輯index.ios.js裏的代碼，也能夠額外在其目錄添加其餘js文件，進行代碼編寫。

下面的代碼是按照ES6語法標準來寫，通常如今大都是用ES5語法標準來寫。

7.關於react native 仍是須要多敲代碼去熟悉，冰凍三尺非一日之寒。