?前端時間在找工作的時候,發(fā)現(xiàn)現(xiàn)在iOS行業(yè)基本屬于一個飽和的狀態(tài)了.單單的會iOS的原生開發(fā)已經(jīng)不能滿足很多公司的業(yè)務(wù)開發(fā)需求,導(dǎo)致與很多心儀的公司擦肩而過.看了很多的公司的招聘需求,混合開發(fā)也屬于一個比較基礎(chǔ)的技能了,所以就自己嘗試去學(xué)習(xí)一下,以下是我的一個個人筆記和網(wǎng)絡(luò)查詢資料的.
React-Native簡介
React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架摔敛，是Facebook早先開源的UI框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物关划，目前支持iOS和安卓兩大平臺儡首。RN使用Javascript語言蔑鹦，類似于HTML的JSX，以及CSS來開發(fā)移動應(yīng)用弟晚，因此熟悉Web前端開發(fā)的技術(shù)人員只需很少的學(xué)習(xí)就可以進(jìn)入移動應(yīng)用開發(fā)領(lǐng)域忘衍。
React Native使你能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗，構(gòu)建世界一流的原生APP卿城。
環(huán)境搭建
(1)iOS開發(fā),肯定得有Mac系統(tǒng).沒有的可以虛擬機(jī)(不推薦,性能太差)
(2)開發(fā)軟件Xcode
(3)安裝Node.js
(4)安裝brew
(4)建議安裝watchmam：brew install watchman
(5)安裝flow：brew install flow
(6)安裝命令行工具:sudo npm install -g react-native-cli
準(zhǔn)備工作完畢,至于上面的安裝有問題,都是一些小問題,大家都能輕輕松松解決
項目創(chuàng)建
(1)打開終端,cd到你想要存放項目的目錄,我選擇的是桌面
cd /Users/liangk/Desktop (liangk:是我的用戶名)
(2)創(chuàng)建工程
react-native init HelloWorld (為什么是這個名字,大家都懂的~)
命令執(zhí)行完畢,就可以在桌面看到我們想要創(chuàng)建的項目啦,大家一打開就看到里面有和我們原生創(chuàng)建項目不同的東西
不要慌,我們直接找到iOS,打開,剩下的就是輕車熟路的問題啦~
問題
大家打開的時候,在Xcode中cmd + R執(zhí)行的時候,會發(fā)現(xiàn),這個項目一直不動,也不報錯...等了很久也不知道什么原因.還出來了一個Analyze靜態(tài)分析工具.不要慌張,下面是我網(wǎng)上搜索了別人的解決辦法.
(1)大家再次回到終端,發(fā)現(xiàn)項目創(chuàng)建完畢的時候,會有提示我們選擇運(yùn)行的方式,我們剛剛是選擇的是Xcode的.現(xiàn)在我們嘗試一下使用終端的命令.
執(zhí)行cd /Users/liangk/Test ,再執(zhí)行react-native run-ios
雖然我們看到彈窗了一個新的終端,在我們開心的時候,另外的終端卻報錯了.
下面我們修改一下項目的配置項,找到node-modules文件夾,然后刪除它枚钓，修改pakage.json文件，然后執(zhí)行npm install瑟押。其中秘噪，pakage.json文件應(yīng)該這么改：
"react": "16.0.0",
"react-native": "0.45.0"
改為
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
然后再次運(yùn)行,發(fā)現(xiàn),不報錯,
再次執(zhí)行,成功了,但是缺沒有彈出對應(yīng)的界面~
但是還是沒有彈出界面,怎么辦呢.然后我們再次通過Xcode來打開,發(fā)現(xiàn),還是不行,下面看第二個.(有些按照第一個方法就可以跑起來了,具體原因請各位解答一下)
(2)修改創(chuàng)建項目的命令
react-native init --version="0.42.0" HelloWorld1
之后重復(fù)上面的操作,發(fā)現(xiàn),項目完全跑起來了.
項目代碼修改
Xcode里面的代碼目錄結(jié)構(gòu)暫時不用管了，打開HelloWorld項目文件夾勉耀，找到index.ios.js文件指煎。
index.ios.js文件就是React-Native JS 開發(fā)之旅的入口文件了。 先來個感性的認(rèn)識便斥，修改一
些文本至壤，下一篇會解讀里面的代碼。用文本編輯器打開index.ios.js文件枢纠。
（1）找到代碼部分：
Welcome to React Native!
自己動手嘗試修改一下~會不一樣的效果
運(yùn)行結(jié)果:
總結(jié)
上面的就是我的一些個人的整理筆記,都是下面的整理出來的,有錯誤的請大家指出~
下面分享一些學(xué)習(xí)鏈接:
