不管 Web 還是 App 要寫得漂亮、寫的敏捷最重要的就是使用別人寫好的 library ,尤其是 React Native 這種新興的技術,看別人的 Code 長知識是不可或缺的過程。
可以在這 https://js.coach/react-native ,找 React Native 的 library , 也有 React、Webpack、browserify 能任君挑選
選好喜歡的 UI 或是功能後,最重要的就是怎麼加進自己的 project 瞜
通常簡單沒有使用到原生元件的 library 都只要下一行指令就能完成
npm i <library name> --save
但是有些元件會使用到原生的元件像是這個 SearchBar
就有使用到原生的功能,所以就要做一些步驟來安裝他,目前我所知道的 React Native Linking Libraries 有三種方法。
第一種
如果這個 library 有使用 CocoaPods 做第三方的套件管理,那就方便很多了,就能像是 npm 一樣快速地安裝並使用
pod install
如果 pod: command not found
記得要安裝 cocoapods
sudo gem install cocoapods
剛好 react-native-search-bar 並沒有使用 CocoaPods 管理相依性套件所以需要使用第二、三種的方法
這裡需要注意的是如果 CocoaPods 的 podspec 沒有寫好就會導致明明 Build Success 但是模擬器卻打不開的情況
第二種
使用
rnpm
安裝 rnpm
npm install rnpm -g
cd 到你 project 資料夾下
rnpm link
他就會把 package.json 內的 dependencies 和 devDependencies 需要 link 的 Libraries 跟原生的元件做依賴
第三種
在 Xcode 中手動 link
npm install 完後進入 Xcode,找到 Libraries 的資料夾,如果沒有 Libraries 資料夾可以自己手動建立
把 node_modules 內該 library 的 .xcodeproj 拖進 Libraries 內
然後
大致上就能使用了
最後,如何分辨 Library 要如何安裝呢?
其實只要仔細閱讀開發者寫的 README.md 大部分就能完成了,如果發現有 XXXX.podspec 那就能高高興興地使用 pod install