React Native搭建iOS開發環境_IOS

一、寫在前面

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-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

二、React Native基礎環境搭建

1、安裝Homebrew

開啟終端輸入：

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

2、安裝nvm方法

通過指令碼安裝方式，在終端執行：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash

啟用nvm,在安裝指令碼執行完之後，在終端執行:

. ~/.nvm/nvm.sh

3、預設安裝最新版本的Node.js並且設定好命令列的環境變數

nvm install node && nvm alias default node

可以輸入node命令啟動Node.js環境

4、安裝watchman

在終端輸入：

 brew install watchman

到此處React Native基礎環境搭建基本完成，推薦經常運行brew update && brew upgrade命令保持你的程式是最新的。

三、iOS開發環境

1、iOS開發環境： （預設讀者已經安裝Xcode7.0或以上版本，沒有可自行前往AppStore下載）

使用npm（node包管理工具）安裝react-native-cli(此處應注意許可權問題，如果遇到許可權問題，請在下面的命令前加上sudo)

npm install -g react-native-cli

初始化工程（下面的語句中千萬不要加sudo，後果自負）

react-native init ReactNativeProject（工程名）

在初始化的過程中，如果進度緩慢，推薦你將npm倉庫源換成國內鏡像：(翻牆使用者請忽略) 在終端輸入：

npm config set registry https://registry.npm.taobao.orgnpm config set disturl https://npm.taobao.org/dist

2、使用Xcode運行偵錯工具

尋找ReactNativeProject檔案目錄

按住快速鍵Command+Shift+G，在彈出的“前往檔案夾”對話方塊中輸入路徑/Users/yangshebing/ReactNativeProject（yangshebing表示電腦使用者名稱，請自行更改）,點擊前往。在檔案目中的ios檔案夾下找到“ReactNativeProject.xcodeproj”工程檔案。如圖所示：

運行ReactNativeProject工程

使用Xcode開啟“ReactNativeProject.xcodeproj”工程檔案，按住快速鍵"Command+R"運行此項目，運行成功後便可在模擬器上看到效果。

編輯index.ios.js檔案修改介面

筆者編輯index.ios.js檔案工具是Vim，每當編輯完index.ios.js檔案並儲存之後，在模擬器(Simulator)中，按Command+R可重新整理介面查看改變後的效果。

下面我們也試著稍微修改一下index.ios.js檔案：

/** * Sample React Native App * https://github.com/facebook/react-native */'use strict';import React, { AppRegistry, Component, StyleSheet, //添加Image全域變數 Image, Text, View} from 'react-native';class ReactNativeProject extends Component { render() { return (  <View style={styles.container}>  //添加文本展示  <Text style={styles.welcome}>   美女  </Text>  //添加圖片展示  <Image   source=   //這裡需要指定圖片的大小  style={styles.picture} />  </View> ); }}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, //這裡可以設定文本的字型，對齊等 welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, //新增圖片style，設定圖片大小 picture: { width: 80, height: 150, },});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

重新整理後運行效果如下圖所示：

真機運行調試項目

在ReactNativeProject工程中找到AppDelegate.m檔案，將localhost替換成自己電腦的IP地址。

// jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; jsCodeLocation = [NSURL URLWithString:@http://192.168.31.168:8081/index.ios.bundle?platform=ios&dev=true];

替換完成之後再次運行程式，這個時候可以通過搖晃裝置喚出開發菜單。

禁用開發菜單

在打包提交市場前，需要禁用開發菜單。禁用開發菜單方法如下： 開啟工程，選擇Product → Scheme → Edit Scheme或使用快速鍵“Command + <”,在彈出的視窗中選擇左邊的Run功能表項目。更改“Build Configuration” 設定項為“Release”。

總結

好了，看到這裡，如果你已經成功配置了React-Native的環境，並且建立並成功運行了第一個程式了。那麼，就先恭喜了，我們甚至沒有寫一行代碼，就已經成功運行了第一個React-Native的程式，是不是還挺簡單的。正所謂，良好的開端是成功的一半。如果有問題大家可以留言交流。