前言
這篇文章的目的, 是讓沒有接觸過 RN 的同學能夠用最少的時間, 踩最少的坑, 一睹 RN 芳容. 如果網速不慢的話, 一個小時左右, 你就可以運行官方示例項目, 查看項目代碼, 對 RN 有一個初步的認識
RN 這門語言不難, 如果有一定的前端基礎, 學起來更是如魚得水.
雖然 RN 目前還不能取代原生, 她的地位是作為前端一統天下的一環. 但是作為一個 coder, 面對相關新技術, 且不論是敵軍還是友軍, 有適當的了解, 總是好的.
開發環境
開放目錄的讀寫權限
sudo chown -R `whoami` /usr/local
安裝 Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安裝 Node, Watchman
brew install node
brew install watchman
設置 npm 鏡像, npm 是一個重要的包管理器, 類似 cocoapods
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安裝 react-native-cli, 這是 facebook 推出的命令行工具, 用來創建一個 RN 項目
npm install -g yarn react-native-cli
最后你需要一個 Xcode??, 特別注意在 Xcode | Preferences | Locations 菜單中檢查一下是否關聯 Command Line Tools
First Blood
在網速好的情況下, 搭建開發環境應該是很快的, 現在就可以使用 react-native init 命令創建 RN 項目了
cd Desktop
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
如果能跑起來, 恭喜, 如果遇到什么問題, 請看文章末尾的 錯誤處理
開發工具選擇
過個眼癮顯然不夠, 我們還要敲一敲, RN 在開發工具上的選擇上非常多, 但是作為一個前端新手, 我墻裂推薦 Visual Studio Code. 這是去年前端領域熱度最高的編輯器, 于2016年由微軟發布, 提供官方 react-native-tool 插件, 上手簡單顏值高.
你需要做的是:
下載安裝VSCode -> 安裝 react-native-tool 插件 -> 重啟VSCode
安裝插件看下圖
上面都搞定后, 把 AwesomeProject 文件夾拖到 VSCode 就可以編輯了, 試著改改 index.ios.js, 然后模擬器 cmd + r 刷新界面
體驗官方示例項目
到了這里, 我們終于一睹了 react-native 的...
額頭
什么鬼, 我們只看到了幾行代碼和一個簡單的頁面, 不行, 我們要看正臉!
官方示例項目 UIExplorer, 聽名字就知道這就是我們要的東西.
cd Desktop
git clone https://github.com/facebook/react-native.git
cd react-native
npm install
用 Xcode 打開 Examples/UIExplorer/UIExplorer.xcodeproj, run起來就 OK 了. 出錯請看文章末尾的 錯誤處理
可以看到, 這個示例項目是一個列表, 列表項幾乎包含了所有的控件和api, 點擊列表項會 push 到展示控件使用的界面
在 VScode 中查看對應代碼, 可以把 UIExplorer 文件夾拖到 VScode, 然后使用 cmd + p 查找文件, 文件名和列表項的 title 是對應的
如果在代碼里看到很多報紅, 不要緊張, 因為這份示例代碼使用的不是最新語法.
任務完成
終于, 我們一睹了 RN 芳容, 然而她穿著舊衣服...
但至少我們見到了不是, 而不再是 聽說過 了
下面這張圖是我學習 RN 的過程中的一個小小的總結, 不滿足于一瞥, 想要更深入的學習的同學可以參考
錯誤處理
結束掉終端進程, 退出相關程序, 進入項目文件夾, 執行命令
react-native start
如果一切順利, 使用命令 react-native run-ios 或者直接用 Xcode 跑
如果提示 8081 端口被占用, 這個時候終端會提示你怎么操作, 步驟如下
1.查看占用端口的進程ID
sudo lsof -i:8081
2.殺掉進程
sudo kill 1332(這里寫進程ID)
