t↗trunk創科資訊
選單

ENGINEERING INSIGHTS

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

React Native 不要重造輪子,如何使用人家寫好的 Component。不管 Web 還是 App 要寫得漂亮、寫的敏捷最重要的就是使用別人寫好的 library ,尤其是 React Native 這種新興的技術,看別人的 Code 長知識是不可或缺的過程。 可以在這

kyle

歷史技術文章 · 本文保留原發表內容,工具版本與服務狀態請以目前官方文件為準。

歷史素材註記:原文有 4 張圖片目前無法取回,已保留可讀文字與程式碼。

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

KEEP EXPLORING

探索服務項目 瀏覽實績案例 閱讀更多觀點

一起規劃您的下一步。

與創科聯絡