公司因需要用到React-Native開發(fā)幾個項目葛躏,在接手上一個前輩的項目的時候感到頭痛澈段。
幾乎每一個三方庫都要以工程的形式導入,然后需要看文檔去找集成方法舰攒。當一個庫出現(xiàn)問題或者經(jīng)常性會因為npm install某個庫的時候其他庫出現(xiàn)自動刪除的情況败富。就又要從頭開始一個個的庫去查找。有時一天兩天的有時一周時間都在處理這樣的問題摩窃。
發(fā)現(xiàn)了一個比較取巧的方法是:用cocoapods來管理這些第三方庫囤耳,存一份podfile文件就能一勞永宜。
先上一份目前項目中正在用到的一些RN三方庫的podfile文件:
platform :ios, '9.0'
target 'Personal' do
? pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
? pod 'React', path: '../node_modules/react-native/', :subspecs => [
? ? ? 'Core',
? ? ? 'DevSupport',
? ? ]
? pod 'RNFS', :path => '../node_modules/react-native-fs'
? pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/lib/ios/'? #地圖
? pod 'ReactNativePermissions', :path => '../node_modules/react-native-permissions' #權(quán)限管理
? pod 'RCTHttpCache', :path => '../node_modules/react-native-http-cache'? ? ? ? ? ? #數(shù)據(jù)請求
? pod 'RNPutiPay', :path => '../node_modules/react-native-puti-pay/ios'? ? ? ? ? ? #支付
? pod 'socket.io-push-oc'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? #socket push
? pod 'UMCShare/Social/ReducedWeChat'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? #分享? 登錄
? pod 'UMCShare/Social/ReducedQQ'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? #分享? 登錄
? pod 'UMCShare/Social/ReducedSina'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? #分享? 登錄
? pod 'UMCAnalytics'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? #統(tǒng)計
? pod 'react-native-async-storage', :path => '../node_modules/@react-native-community/async-storage'? #異步存儲
? pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'? ? ? ? #手勢
? pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'#處理白屏
end
post_install do |installer|
? ? installer.pods_project.targets.each do |target|
? ? ? ? targets_to_ignore = %w(React yoga)
? ? ? ? if targets_to_ignore.include? target.name
? ? ? ? ? ? target.remove_from_project
? ? ? ? end
end
end
platform:兼容的iOS系統(tǒng)最低版本
target??? :工程文件名字
后面的pod就是對應的每個三方庫?? path指向podspec描述文件
再后面的post_install do |installer|是為了防止在三方庫中有一些庫對于RN的系統(tǒng)庫有依賴 導致在導入三方庫的時候和系統(tǒng)庫發(fā)生沖突導致報錯? duplicate XXXXXXXX
現(xiàn)在的問題是有些三方庫并沒有提供cocoapod集成的方法那么要怎么做才能使用cocoapod來集成三方庫
例如react-native-splash-screen在文檔中并沒有提供cocoapod方法??? 但是在下載該三方庫之后會發(fā)現(xiàn)里面有一個react-native-splash-screen.podspec文件 ? ? 那么就容易了 ?? 直接 pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen' ? ?? path指向這個podspec文件就行了
如果連podspec文件都不存在的庫我們該怎么處理 偶芍?
首先我們來看一下podspec文件里面都是一些什么信息
require "json"
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
Pod::Spec.new do |s|
? s.name???????? = "react-native-splash-screen"
? s.version????? = package["version"]
? s.summary????? = package["description"]
? s.author?????? = 'crazycodeboy'
? s.homepage???? = package["homepage"]
? s.license????? = package["license"]
? s.platform???? = :ios, "7.0"
? s.source?????? = { :git => "https://github.com/crazycodeboy/react-native-splash-screen", :tag => "v#{s.version}" }
? s.source_files? = "ios/*.{h,m}"
? s.dependency "React"
end
大致猜一下
s.name??? 名字
s.version??? 版本號
s.summary??? 描述
s.author ? 作者
s.homepage 主頁
s.license?? 許可證
s.platform?? 平臺
s.source? 來源
s.source_files 來源文件
s.dependency? 依賴庫
既然沒有podspec文件咱給他創(chuàng)建一個例如react-native-zendesk-chat
這個庫在下載之后是沒有podspec文件的??? 咱們復制一個剛才的文件到node_modules/react-native-zendesk-chat文件夾下面
然后名字改成react-native-zendesk-chat.podspec
里面該寫什么充择?
照葫蘆畫瓢!匪蟀!
庫里面有package.json文件
照著package.json文件把信息填上
運行pod install
require 'json'
pjson = JSON.parse(File.read('package.json'))
Pod::Spec.new do |s|
? s.name??????????? = "UPPayControl"
? s.version???????? = pjson["version"]
? s.homepage??????? = "https://github.com/ws752958369/react-native-unionpay"
? s.summary???????? = pjson["description"]
? s.license???????? = pjson["license"]
? s.author????????? = { "Johannes Lumpe" => "johannes@lum.pe" }
? s.ios.deployment_target = '7.0'
? s.source????????? = { :git => "git+https://github.com/ws752958369/react-native-unionpay", :tag => "v#{s.version}" }
? s.source_files??? = '**/*.{h,m}'
? s.preserve_paths? = "**/*.js"
? s.dependency 'React'
end
看到這里基本上說明我們寫的本地podspec文件是沒有問題的
引用測試
編譯發(fā)現(xiàn)未報錯? 大功告成W德蟆!材彪!