React Native 如何使用第三方库及实例

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服务器供别人使用。

接下来我们就是下载别人编写的第三方包到项目中使用。

一、初始化一个项目

image.png

初始化完成之后，打开项目我们可以看到项目已经生成了一个 package.json 文件：

image.png

包的定义和 NPM 都围绕着 package.json 文件做文章，package.json 文件其实就相当于 iOS 中的 podfile 文件，用于存放模块的名称、版本、作者、机构、模块入口、依赖项等信息：

image.png

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>先安装包到项目中：

image.png

查看此时的 package.json 会发现多了绿色框内的内容：

image.png

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'
    },
});

效果图：

image.gif
一个轮播图就完成了，demo在这。如果你想了解它的更多功能，点这里react-native-swiper。

如果想要使用其他的第三方组件，可以参考上面的例子，流程大同小异，区别就在于每个组件的属性存在区别，但是只要仔细阅读作者写的使用文档，就可以做成你想要的样子了。

更多的优秀第三方组件：
React Native组件库
react native第三方组件（持续更新...）
React Native 项目常用第三方组件汇总
React Native的中文参考资料，包括开源库，文字/视频资料，相关工具等

NPM更多更详细的讲解：
NPM (node package manager) 入门 - 基础使用
npm入门文档
【原】nodejs全局安装和本地安装的区别