iOS 开发的时候，如果想使用第三方库的话，一般我们会选择 CocoaPods 来管理第三方库，好用方便。最近在敲 React Native，刚开始的时候想着 RN 的第三方库怎么使用？经过摸索之后算是知道怎么用了，在此记录一下，刚入门的同学可以看一下，React Native 大神请绕道哈，水平有限，有错误的话请指出。
什么是NPM ?
NPM 是 NodeJS 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 NPM 管理你分享的代码也很方便快捷和简单。
NPM 使用介绍
NPM 是随同 NodeJS 一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，安装完 NodeJS 就已经有了 NPM, 不过由于 NodeJS 更新速度要慢于 NPM ，因此在一般情况下要升级你的 NPM 到最新版本。如果你还没有安装，这里有详细的安装流程。
NPM 常见的使用场景有以下几种：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
接下来我们就是下载别人编写的第三方包到项目中使用。
一、初始化一个项目
初始化完成之后，打开项目我们可以看到项目已经生成了一个 package.json 文件：
包的定义和 NPM 都围绕着 package.json 文件做文章，package.json 文件其实就相当于 iOS 中的 podfile 文件，用于存放模块的名称、版本、作者、机构、模块入口、依赖项等信息：
package.json 的一些内容的功能：
- name：表示模块名称。
- version：表示模块的版本号。版本号以主版本号(Major).副版本号(Minor).补丁版本号(Patch)构成（如1.2.0）。
- scripts：自定义在cli中输入
npm "script"时实际执行的程序，npm默认提供大量的script供我们调用。 - dependencies、devDependencies：用于配置模块的生产环境依赖包和开发环境依赖包。当执行npm install时，npm会根据这两个配置项的值去下载安装相关的依赖包。两者的区别是devDependencies是模块开发过程的依赖包，并且当其他模块需要依赖当前模块时，当通过npm install “package-name”时会自动下载安装dependencies的包而不会下载devDependencies的包。
二、查找、安装/卸载、更新依赖包
包的种类：
- 全局包：用作在cli上直接调用，用户可以在命令行中直接运行该组件包支持的命令，而无法在项目中通过 require 导入依赖包。
- 本地包：用作在项目中通过 require 导入依赖包，供项目使用。
全局和本地的依赖包存放位置：
- 通过
npm root -g和npm root可分别查看全局和本地的依赖包下载安装的绝对目录了。全局包安装在Node安装目录下的node_modules文件夹中，本地的依赖包会存放在当前项目根目录下的 node_modules 目录下。
包的搜索：
搜索依赖包:
npm search "package-name"
查看依赖包的package.json信息:
npm view "package-name"
单独查看package.json某个配置:
查看包的依赖关系
npm view "package-name" dependencies
查看包的源文件地址
npm view "package-name" repository.url
查看包所依赖的node版本号
npm view "package-name" engines
安装、卸载、更新包：
- 安装包
本地
npm install "package-name"
全局
npm install -g "package-name"
这样会安装最新版的包，若需要安装特定版本，则
npm install "package-name"@"version"
注意：本地安装时将模块写入package.json中：
npm install "package-name"安装但不写入package.json；
npm install "package-name" --save安装并写入package.json的”dependencies”中；
npm install "package-name" --save-dev安装并写入package.json的”devDependencies”中。
- 卸载包
卸载本地
npm uninstall "package-name"
卸载全局
npm uninstall -g "package-name"
- 更新包
更新本地
npm update "package-name"
更新全局
npm update -g "package-name"
三、项目中使用三方库
使用一个常见的轮播图组件react-native-swiper作为例子
1>先安装包到项目中：
查看此时的 package.json 会发现多了绿色框内的内容：
2>把包引入到需要使用的文件内：
import Swiper from 'react-native-swiper'
3>使用：
export default class extends Component {
constructor(props) {
super(props)
}
render(){
return (
<View style={styles.mainStyle}>
<Swiper style={styles.wrapper}
autoplay={true}
autoplayTimeout={1}
>
<View style={styles.slide}></View>
<View style={styles.slide1}></View>
<View style={styles.slide2}></View>
<View style={styles.slide3}></View>
</Swiper>
</View>
);
}
}
var styles = StyleSheet.create({
mainStyle: {
width: screenW,
height: screenH,
backgroundColor: "#1ab9af",
justifyContent: 'flex-start',
alignItems: 'center',
},
wrapper:{
marginTop:50,
height:250,
backgroundColor:'white',
},
slide: {
height:250,
justifyContent: 'center',
backgroundColor: 'blue'
},
slide1: {
height:250,
justifyContent: 'center',
backgroundColor: 'yellow'
},
slide2: {
height:250,
justifyContent: 'center',
backgroundColor: 'red'
},
slide3: {
height:100,
justifyContent: 'center',
backgroundColor: 'cyan'
},
});
效果图：
一个轮播图就完成了，demo在这。如果你想了解它的更多功能，点这里react-native-swiper。
如果想要使用其他的第三方组件，可以参考上面的例子，流程大同小异，区别就在于每个组件的属性存在区别，但是只要仔细阅读作者写的使用文档，就可以做成你想要的样子了。
更多的优秀第三方组件：
React Native组件库
react native第三方组件（持续更新...）
React Native 项目常用第三方组件汇总
React Native的中文参考资料，包括开源库，文字/视频资料，相关工具等
NPM更多更详细的讲解：
NPM (node package manager) 入门 - 基础使用
npm入门文档
【原】nodejs全局安装和本地安装的区别
