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

2017-10-17 本文已影响300人 IAMCJ

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 如何使用第三方库及实例

什么是NPM ?

NPM 使用介绍

一、初始化一个项目

package.json 的一些内容的功能：

二、查找、安装/卸载、更新依赖包

三、项目中使用三方库

猜你喜欢

热点阅读