RN创建私库流程（iOS版）

2019-02-21 本文已影响2人鸢尾嵌宇

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

参考：

license
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