React Native 不要重造輪子,如何使用人家寫好的 Component

不管 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 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 資料夾可以自己手動建立
手動建立 Libraries 把 node_modules 內該 library 的 .xcodeproj 拖進 Libraries 內 手動 setp1 然後 手動 setp2 大致上就能使用了

最後,如何分辨 Library 要如何安裝呢? 其實只要仔細閱讀開發者寫的 README.md 大部分就能完成了,如果發現有 XXXX.podspec 那就能高高興興地使用 pod install