1. 程式人生 > >React Native封裝原生元件釋出到npm

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。。。

初生牛犢==