一. 使用工具 react-native-create-library
1. github看下release是否为最新版本,如果不是,下载react-native-create-library
2. 使用react-native-create-library,创建库文件
/Users/.../react-native-create-library-master/cli.js #projectName#
注:(如果react-native-create-library已经有release最新版本,则执行下面代码,我使用时看到release版本滞后很多,不建议使用)
~~1. 项目根目录,执行命令行
npm install -g react-native-create-library
- 或者使用yarn工具(推荐)
yarn add react-native-create-library - 使用react-native-create-library,创建库文件
react-native-create-library #projectName#~~
二. 修改定义package.json文件
1. 示例
{
"name": "react-native-amapallcom",
"title": "React Native Amapallcom",
"version": "0.0.1",
"description": "高德地图的RN封装",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/yuanweiqianyu/react-native-amap-mapcom.git",
"baseUrl": "https://github.com/yuanweiqianyu/react-native-amap-mapcom"
},
"keywords": [
"react",
"react-native",
"amap"
],
"author": {
"name": "pzz",
"email": "1924636612@qq.com"
},
"bugs": {
"url": "https://github.com/yuanweiqianyu/react-native-amap-mapcom/issues",
"email": "1924636612@qq.com"
},
"license": "Apache-2.0",
"licenseFilename": "LICENSE",
"readmeFilename": "README.md",
"peerDependencies": {
"react": "16.2.0",
"react-native": "^0.52.0",
"react-native-windows": "0.52.0"
},
"devDependencies": {
"react": "16.2.0",
"react-native": "^0.52.0",
"react-native-windows": "0.52.0"
}
}
2. key值解析
(1). name
发布的库名称
规则:
- 小于等于214个字符
- 不能使用一个点或者下划线
- 不能包含大写字母
- 该名称最终是你URL结尾的一部分,因此,不能包含不被URL路径不允许的字符
eg: https://github.com/yuanweiqianyu/react-native-amap-alls.git - 不能使用 "js" 或者
- 检查此名字是否已经在npm上被注册https://www.npmjs.com/
注:包名可以包含一个范围@myorg/mypackagename ,查看使用方式npm-scope
(2). version
版本 eg:1.0.0
(3). description
描述 简要描述库的功能,npm search 能展示
(4). keywords
关键字 npm search 能展示
(5). homepage
库的主页 eg:
"homepage": "https://github.com/yuanweiqianyu/react-native-amap-alls”
(6). bugs
包的bug跟踪主页地址。
{ "url" : "https://github.com/owner/project/issues"
, "email" : "project@hostname.com"
}
(7)bugs
bug追踪地址 eg:
https://github.com/yuanweiqianyu/react-native-amap-alls/issues
(8)license
包的开源协议名称
{ "license": "ISC" }
{ "license": "(MIT OR Apache-2.0)" }
(8)author
包的作者
{ "name" : "Barney Rubble"
, "email" : "b@rubble.com"
, "url" : "http://barnyrubble.tumblr.com/"
}
或者
"Barney Rubble <b@rubble.com> (http://barnyrubble.tumblr.com/)"
(9)files
包所包含的所有文件,可以取值为文件夹。通常我们还是用.npmignore来去除不想包含到包里的文件。
(10)main
包的入口文件
(11)browser
如果你的包是client-side,使用browser代替main,帮助使用者判断是否依赖Node.js
(12)bin
如果你的包里包含可执行文件,通过设置这个字段可以将它们包含到系统的PATH中,这样直接就可以运行,很方便。
(13)man
为系统的man命令提供帮助文档。帮助文件的文件名必须以数字结尾,如果是压缩的,需要以.gz结尾。
(14)directories(较少用)
CommonJS包所要求的目录结构信息,展示项目的目录结构信息。字段可以是:lib, bin, man, doc, example。值都是字符串。
(15) repository
包的仓库地址,地址必须是公开的
"repository": {
"type" : "git",
"url" : "https://github.com/npm/cli.git"
}
GitHub, GitHub gist, Bitbucket, or GitLab的项目也可以直接使用:
"repository": "npm/npm"
"repository": "github:user/repo"
"repository": "gist:11081aaa281"
"repository": "bitbucket:user/repo"
"repository": "gitlab:user/repo"
(16)scripts
通过设置这个可以使NPM调用一些命令脚本,封装一些功能。更多参考:npm-scripts
(17)dependencies
指定依赖的其它包,这些依赖是指包发布后正常执行时所需要的,也就是线上需要的包。使用下面的命令来安装:
(18) devDependencies
开发时指定依赖的其它包
(19)peerDependencies
相关的依赖,如果你的包是插件,而用户在使用你的包时候,通常也会需要这些依赖(插件),那么可以将依赖列到这里。
(20)bundledDependencies
绑定的依赖包,发布的时候这些绑定包也会被一同发布。
(21)optionalDependencies(较少用)
即使这些依赖没有,也可以正常安装使用。
(22)engines(较少用)
指定包运行的环境。
"engines": {
"node": ">=0.10.3 < 0.12",
"npm": "~1.0.20"
}
(23)os(较少用)
指定你的包可以在哪些系统平台下运行。
"os": [ "darwin", "linux", "!win32" ]
(24)cpu(较少用)
可以指定包运行的cpu架构。
(25)private
设为true这个包将不会发布到NPM平台下。
(26)publishConfig(较少用)
这个字段用于设置发布时候的一些设定。尤其方便你希望发布前设定指定的tag或registry。
三. 修改定义.podspec文件
示例
require "json"
package = JSON.parse(File.read(File.join(__dir__, "package.json")))
Pod::Spec.new do |s|
// 为了保持一致性,此处多依赖npm库的package.json,也可以单独写
// 名称(注意:!!!必须和.podspec文件名称保持一致)
s.name = "RNAmapallcom"
// 版本(一般和github或者远程的tag保持一致,或者s.source去掉tag值)
s.version = package["version"]
// 简单描述
s.summary = package["description"]
// 详细介绍
s.description = <<-DESC
RNAmapallcom
DESC
// 主页
s.homepage = package['repository']['url']
// listen文件的类型
s.license = "MIT"
# s.license = { :type => "MIT", :file => "FILE_LICENSE" }
// 作者
s.author = { package['author'] => package['author']['url'] }
// 支持平台,最低版本
s.platform = :ios, "9.0"
// 源 git的仓库地址
s.source = { :git => package['repository']['url'], :tag => "#{s.version}" }
// 工程需要引入的文件
s.source_files = "ios/**/*.{h,m}"
// 是否支持ARC
s.requires_arc = true
// 工程依赖的第三方库
s.dependency "React"
s.dependency "AMap3DMap"
s.dependency "AMapSearch"
end
参考:
四. 本地使用npm库文件,测试
1. 将react-native-create-library生成并修改后的文件粘贴到RN项目中
2. RN项目中,
(1)
如果iOS项目,之前已经创建Podfile文件,生成了.xcworkspace,直接在RN的根路径执行
react-native link #自己的库名#
或者,新项目,必须生成react的pod文件后,才连接自己的第三方库,否则,容易出现RCTBridgeModule.h no found 的错误,或者 <React/RCTDefines.h> no found的错误,步骤如下:
①. 在iOS工程,创建Podfile文件,写入命令行,执行pod install
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47则加入此行
'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 调试功能需要此模块
'RCTAnimation', # FlatList和原生动画功能需要此模块
# 在这里继续添加你所需要的其他RN模块
]
# 如果你的RN版本 >= 0.42.0,则加入下面这行
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
②. 再链接rn
react-native link #自己的库名#
(2)之后,可以看到iOS的Podfile中自动生成了
pod '#自己的pod文件名#', :podspec => '#.podspec文件相对路径路径#'
eg:
pod 'RNAmapallcom', :podspec => '../node_modules/react-native-amapallcom/RNAmapallcom.podspec'
(3) 安装第三库,pod install
五、 npm发库
1、npm镜像修改
//查看镜像
npm config get registry
//修改npm官方
npm config set registry http://registry.npmjs.org
注:npm发库,必须是使用npm自己的镜像 http://registry.npmjs.org
(或者你自己的私有npm库),不能借助淘宝
2、登录npm
//判断是否登录
npm whoami
//登录(输入用户名,密码,邮箱登录)
npm login
//没有注册过添加,添加个
npm adduser
3、发布
把你的npm库文件提交到远程git后,在npm库文件路径下,执行
npm publish