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

Share This Post

不管 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

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Do You Want To Boost Your Business?

drop us a line and keep in touch