公司因需要用到React-Native开发几个项目,在接手上一个前辈的项目的时候感到头痛。
几乎每一个三方库都要以工程的形式导入,然后需要看文档去找集成方法。当一个库出现问题或者经常性会因为npm install某个库的时候其他库出现自动删除的情况。就又要从头开始一个个的库去查找。有时一天两天的有时一周时间都在处理这样的问题。
发现了一个比较取巧的方法是:用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' #权限管理
pod 'RCTHttpCache', :path => '../node_modules/react-native-http-cache' #数据请求
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' #统计
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系统最低版本
target :工程文件名字
后面的pod就是对应的每个三方库 path指向podspec描述文件
再后面的post_install do |installer|是为了防止在三方库中有一些库对于RN的系统库有依赖 导致在导入三方库的时候和系统库发生冲突导致报错 duplicate XXXXXXXX
现在的问题是有些三方库并没有提供cocoapod集成的方法那么要怎么做才能使用cocoapod来集成三方库
例如react-native-splash-screen在文档中并没有提供cocoapod方法 但是在下载该三方库之后会发现里面有一个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文件咱给他创建一个例如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" => "[email protected]" }
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文件是没有问题的
引用测试
编译发现未报错 大功告成!!!