經常看到react-native的庫,通過npm安裝,怎麼才能實現自己的庫呢?
我沒有上傳到npm的公共倉庫中,只是我的GitHub上面的私有庫,通過指定地址也可以實現私有庫,我以微信的SDK爲例,這裏具體實現參考了react-native-wechat這個庫,因爲微信和iOS的審覈都修改對了WKWebView
處理,而這個庫沒有完成升級,所以我自己實現了一個升級的私有庫,基本上代碼沒有修改,只是方便以後使用。
進入正題
一、新建私有庫
- 參考這個工具庫,新建要開發的庫react-native-module
安裝這個庫
npm install -g react-native-cli yarn
npm install -g create-react-native-module
新建你要創建的庫,這個工具可以自動創建example,所以可以直接在裏面開發測試完成後,提交到git。
##QWWechat是庫名 --package-identifier指定了Android的包名,具體參考文檔
create-react-native-module QWWechat --package-identifier io.qw.wechat --generate-example
執行命令後,可以看到庫的一些信息
2. 創建完成後,目錄結構如下,這之後,就可以開發原生和react-native了,原生iOS和Android可以參考官網的文檔原生通信
- 以我的的微信爲例,假如需要三方庫怎麼辦呢,另外三方庫還可能依賴系統或者其他的三方庫(主要是iOS,Android的話直接配置gradle就可以了),這裏就需要配置
podspec
文件,微信可以通過pod集成,所以可以設置成依賴庫,參考 - 到上面這一步,庫基本就完成了,可以上傳到Git,在
package.json
文件中指定地址
"wxlib": "https://github.com/toywang/wxlib.git"
二、遇到的問題
- 在example中可以直接修改代碼,代碼會自動更新到庫中,原因在
package.json
中,這裏做了一個軟連接,實際修改的還是庫,這裏困惑了很久,其他的文檔,告訴我用file
,但其實link
纔對,也許是跟版本有關
"dependencies": {
"react-native-qw-wechat": "link:../",
"react": "16.11.0",
"react-native": "0.62.2"
},
- 如果新建了文件怎麼辦?在iOS中,我用到react-native中的
DeviceEventEmitter
,所以我新建了一個類,但是這個類並沒有同步更新,這個時候,需要重新yarn install
安裝私有庫,執行完以後,pod install
,注意新版本的react-native
不需要react-native link
,但是需要執行pod install
- 還有一個不常有的錯誤,在
react-native-qw-wechat
目錄裏面也有一個package.json
,手欠的我執行了一個yarn install
,導致了運行example出現了一下錯誤