React Native封裝原生元件釋出到npm
因為一個任務,要寫原生的獲取使用者手機資料夾,實現使用者自定義資料夾的功能,寫好了之後嘗試封裝成元件。
1. 首先,有一個rn專案,用Adnroid Studio開啟 android -> app -> build.gradle
如圖新建一個 Android Module,名字就取react-native-xxxxxxx,根據功能取吧,包名都可以自定義的。
以react-native-directory為例
2.react-native-directory->build.gradle 中新增依賴 react-native:+
也可以 File->Project Structure 中選擇Module,選擇Dependencies '+
3. 接著就是常規的建立Module,繼承 ReactContextBaseJavaModule
實現getName()就是js呼叫的方法名
@ReactMethod 表名rn端可以呼叫的方法,注意返回值為void
建立Package,實現ReactPackage介面,新增自己的Module
在react-native-directory中新建js檔案,例如:index.js
4.測試 在原專案中新增依賴
專案名->android->settings.gradle
專案名->android->app->build.gradle
在MainApplication.java中新增Package
(忽略紅色錯誤==)
var PathManager = NativeModules.PathSetting
PathManager.choose().......進行驗證
5.釋出
在github上建立倉庫,託管元件程式碼。
到react-native-directory目錄下
檢查一下npm的映象源
npm get registry
如果不是官方映象源,換回來 npm config set registry https://registry.npmjs.org/
npm login 如果沒有npm賬號,使用npm adduser
npm init按照要求生成package.json檔案
npm publish!!!
6.關於!!!
react-native-directory
點選選擇目錄,點選確定返回目錄path。。。
初生牛犢==