RN创建私库流程(iOS版)

一. 使用工具 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

  1. 或者使用yarn工具(推荐)
    yarn add react-native-create-library
  2. 使用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

发布的库名称
规则:

(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

参考:

license
podspec:

  1. 用法
  2. podspec文件解析

四. 本地使用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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342

推荐阅读更多精彩内容