要說(shuō)React Native最大的優(yōu)勢(shì)，那就是跨平臺(tái)创倔。通過(guò)JavaScript來(lái)開(kāi)發(fā)iOS及Android端的應(yīng)用翔脱，并驅(qū)動(dòng)原生組件渲染（邏輯用js編寫(xiě)，UI都是原生的）谆甜。廢話(huà)不多說(shuō)垃僚，先來(lái)講一下使用React Native前的準(zhǔn)備工作。
??本人使用的React Native版本號(hào)是0.42.3规辱，支持iOS 8.0及以上
一谆棺、下載Node.js
Node.js是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。
官網(wǎng)下載地址：https://nodejs.org/en/
國(guó)內(nèi)鏡像地址：http://nodejs.cn/download/
下載完成后按步驟安裝罕袋，最后會(huì)將Node.js與npm安裝到本機(jī)改淑。npm是Node.js包管理器。
二浴讯、安裝React Native命令行工具
在終端輸入：npm install -g react-native-cli
三朵夏、可以選擇性的安裝插件
- Watchman
是一款安全軟件，可以監(jiān)視文件并且記錄文件的改動(dòng)情況榆纽，當(dāng)文件變更時(shí)它可以觸發(fā)一些操作仰猖。
在終端輸入：brew install watchman
其中的brew是Mac OSX上的軟件包管理工具。 - Flow
是 Facebook 推出的一個(gè)開(kāi)源的 JavaScript 靜態(tài)類(lèi)型檢查器奈籽，可以發(fā)現(xiàn) JS 程序中的類(lèi)型錯(cuò)誤饥侵，以提高開(kāi)發(fā)效率和代碼質(zhì)量。
在終端輸入：brew install flow
四衣屏、創(chuàng)建新的React Native項(xiàng)目
在終端輸入：react-native init HelloRNT
其中的HelloRNT是可以隨意更換的項(xiàng)目名稱(chēng)躏升。
當(dāng)項(xiàng)目創(chuàng)建成功后，打開(kāi)項(xiàng)目文件夾狼忱，大致目錄如下圖：
-
index.ios.js
是自動(dòng)生成的React Native應(yīng)用入口文件膨疏，它是不可或缺的！React Native會(huì)檢測(cè)某個(gè)文件是否具有.ios.或是.android.的擴(kuò)展名钻弄，然后根據(jù)當(dāng)前運(yùn)行的平臺(tái)加載正確對(duì)應(yīng)的文件佃却。文件中的代碼是用于生成一個(gè)視圖組件，部分代碼如下：/* 引入React Native組件 */ import React, { Component } from 'react'; import { View, TouchableOpacity, Text, TextInput, Image, Platform, AppRegistry } from 'react-native'; /* 引入第三方組件 */ import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button' import ImagePicker from 'react-native-image-picker'; import Picker from 'react-native-picker'; import I18n from 'react-native-i18n'; // 定義一個(gè)組件HelloRNT斧蜕，會(huì)用于注冊(cè)組件API的第二個(gè)參數(shù) export default class HelloRNT extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit index.ios.js </Text> <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'} Cmd+D or shake for dev menu </Text> </View> ); } } /* 參數(shù)1：組件的名稱(chēng)双霍，任意字符串，但是一定要與之后創(chuàng)建RCTRootView時(shí)moduleName參數(shù)的傳入值一致 參數(shù)2：定義的組件，如上的HelloRNT */ AppRegistry.registerComponent('HelloRNT', () => HelloRNT); ios
包含HelloRNT.xcodeproj等文件洒闸，點(diǎn)擊Xcode會(huì)打開(kāi)創(chuàng)建的React Native項(xiàng)目染坯。node_modules
是Node.js的組件模塊，其中包含了React Native項(xiàng)目的啟動(dòng)配置腳本等文件丘逸，當(dāng)然单鹿，開(kāi)發(fā)會(huì)用到的UI等組件也包含在里面。另外通過(guò)npm安裝的第三方組件也都在這個(gè)目錄下深纲。package.json
是自動(dòng)生成的包文件仲锄，當(dāng)我們開(kāi)發(fā)React Native應(yīng)用的時(shí)候，可能會(huì)用到第三方類(lèi)庫(kù)湃鹊，比如一些優(yōu)秀的UI控件等儒喊，這時(shí)候我們需要在dependencies這一欄中配置上相應(yīng)的庫(kù)，然后在終端輸入npm install 或者是直接在終端輸入 npm install react-native-image-picker --save 意思是安裝image-picker模塊币呵，--save表示將其配置到package.json文件中怀愧，其他需要關(guān)聯(lián)的庫(kù)類(lèi)似。這里安裝后余赢，index.ios.js里才能import
// 這里在基礎(chǔ)上又增加了三個(gè)依賴(lài)庫(kù)芯义，其中^version代表兼容某個(gè)版本
"dependencies": {
"react": "15.4.2",
"react-native": "0.42.3",
"react-native-flexi-radio-button": "^0.1.5",
"react-native-image-picker": "^0.25.5",
"react-native-picker": "^4.0.18",
},
最后需要在Xcode中導(dǎo)入第三方組件庫(kù)。要注意的是妻柒，有些并不需要導(dǎo)入扛拨，比如react-native-flexi-radio-button，那么如何區(qū)分需要導(dǎo)入跟不需要導(dǎo)入的組件呢举塔？看下載下來(lái)的組件文件夾绑警，如下圖：
導(dǎo)入后在項(xiàng)目中有關(guān)React Native的路徑如下圖：
不要忘記相關(guān)的.a也要加到項(xiàng)目中。這里介紹的是手動(dòng)導(dǎo)入啤贩，當(dāng)然也有自動(dòng)導(dǎo)入待秃，大家可以根據(jù)喜好選擇拜秧。任何一個(gè)正規(guī)的第三方組件都有安裝說(shuō)明痹屹，可以根據(jù)說(shuō)明自行摸索其他方法。
附上第三方組件下載平臺(tái)：https://js.coach/react-native
五枉氮、將React Native引入iOS項(xiàng)目
終于到關(guān)鍵的步驟了志衍。既然是引入到已經(jīng)有的iOS項(xiàng)目中，為什么還要經(jīng)歷第四步聊替？簡(jiǎn)單說(shuō)就是要得到node_modules及其他一些文件楼肪。
這里將React Native引入到已經(jīng)創(chuàng)建好的RNTest項(xiàng)目中：
-
引入React Native
打開(kāi)RNTest文件夾，將node_modules及需要的其他文件拷貝到里面惹悄。完成后目錄大致如下圖：
-
添加React Native組件春叫，可根據(jù)需要決定添加哪些
2.1 右擊項(xiàng)目名稱(chēng)并選擇New Group選項(xiàng)，將其命名為RNTLibraries。
2.2 將靜態(tài)庫(kù)工程React.xcodeproj增加到RNTLibraries文件夾暂殖，React.xcodeproj路徑見(jiàn)下圖：
2.3 將其他靜態(tài)庫(kù)工程增加到RNTLibraries文件夾价匠，路徑見(jiàn)下圖：
添加完成后項(xiàng)目目錄大致如下圖：
2.4 將靜態(tài)庫(kù)添加到項(xiàng)目，完成后如下圖：
2.5 增加運(yùn)行腳本呛每，具體過(guò)程見(jiàn)下圖：
完成后如下圖：
-
編譯運(yùn)行
3.1 此時(shí)Xcode可能會(huì)提示“React/xxx.h”不能發(fā)現(xiàn)的錯(cuò)誤踩窖。由于引入的靜態(tài)庫(kù)工程之間有相互依賴(lài)關(guān)系，比如一些靜態(tài)庫(kù)工程依賴(lài)于React.xcodeproj工程晨横，那么必須先編譯React.xcodeproj洋腮。解決方法也簡(jiǎn)單，只需要打開(kāi)Edit Scheme配置一下手形，完成后的截圖如下：
3.2 如果仍然報(bào)錯(cuò)的話(huà)啥供，我們還需要配置React相關(guān)的頭文件路徑，見(jiàn)下圖：
3.3 Xcode可能還會(huì)提示一堆有關(guān)鏈接的錯(cuò)誤库糠，我們還需要配置Other Linker Flags項(xiàng)滤灯，見(jiàn)下圖：
這時(shí)候再按Command+B，Xcode提示Build Succeeded曼玩，OK鳞骤，大功告成！
對(duì)于如何更好的使用React Native黍判，可以參考http://facebook.github.io/react-native/docs/getting-started.html豫尽。
關(guān)注微信公眾號(hào)CodingArtist，可以第一時(shí)間得到文章更新通知! _
