iOS 開發(fā)的時候，如果想使用第三方庫的話，一般我們會選擇 CocoaPods 來管理第三方庫，好用方便。最近在敲 React Native，剛開始的時候想著 RN 的第三方庫怎么使用？經(jīng)過摸索之后算是知道怎么用了，在此記錄一下，剛入門的同學可以看一下，React Native 大神請繞道哈，水平有限，有錯誤的話請指出。

什么是NPM ?

NPM 是 NodeJS 的包管理和分發(fā)工具。它可以讓 javascript 開發(fā)者能夠更加輕松的共享代碼和共用代碼片段，并且通過 NPM 管理你分享的代碼也很方便快捷和簡單。

NPM 使用介紹

NPM 是隨同 NodeJS 一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題，安裝完 NodeJS 就已經(jīng)有了 NPM, 不過由于 NodeJS 更新速度要慢于 NPM ，因此在一般情況下要升級你的 NPM 到最新版本。如果你還沒有安裝，這里有詳細的安裝流程。
NPM 常見的使用場景有以下幾種：

• 允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
• 允許用戶從NPM服務器下載并安裝別人編寫的命令行程序到本地使用。
• 允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用。

接下來我們就是下載別人編寫的第三方包到項目中使用。

一、初始化一個項目

image.png

初始化完成之后，打開項目我們可以看到項目已經(jīng)生成了一個 package.json 文件：

image.png

包的定義和 NPM 都圍繞著 package.json 文件做文章，package.json 文件其實就相當于 iOS 中的 podfile 文件，用于存放模塊的名稱、版本、作者、機構、模塊入口、依賴項等信息：

image.png

package.json 的一些內(nèi)容的功能：

• name：表示模塊名稱。
• version：表示模塊的版本號。版本號以主版本號(Major).副版本號(Minor).補丁版本號(Patch)構成（如1.2.0）。
• scripts：自定義在cli中輸入npm "script"時實際執(zhí)行的程序，npm默認提供大量的script供我們調(diào)用。
• dependencies、devDependencies：用于配置模塊的生產(chǎn)環(huán)境依賴包和開發(fā)環(huán)境依賴包。當執(zhí)行npm install時，npm會根據(jù)這兩個配置項的值去下載安裝相關的依賴包。兩者的區(qū)別是devDependencies是模塊開發(fā)過程的依賴包，并且當其他模塊需要依賴當前模塊時，當通過npm install “package-name”時會自動下載安裝dependencies的包而不會下載devDependencies的包。

二、查找、安裝/卸載、更新依賴包

包的種類：

• 全局包：用作在cli上直接調(diào)用，用戶可以在命令行中直接運行該組件包支持的命令，而無法在項目中通過 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 會發(fā)現(xiàn)多了綠色框內(nèi)的內(nèi)容：

image.png

2>把包引入到需要使用的文件內(nèi)：
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

如果想要使用其他的第三方組件，可以參考上面的例子，流程大同小異，區(qū)別就在于每個組件的屬性存在區(qū)別，但是只要仔細閱讀作者寫的使用文檔，就可以做成你想要的樣子了。

更多的優(yōu)秀第三方組件：
React Native組件庫
react native第三方組件（持續(xù)更新...）
React Native 項目常用第三方組件匯總
React Native的中文參考資料，包括開源庫，文字/視頻資料，相關工具等

NPM更多更詳細的講解：
NPM (node package manager) 入門 - 基礎使用
npm入門文檔
【原】nodejs全局安裝和本地安裝的區(qū)別