React Native封装原生组件发布到npm

  • Post author:
  • Post category:其他


因为一个任务,要写原生的获取用户手机文件夹,实现用户自定义文件夹的功能,写好了之后尝试封装成组件。



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


github:

https://github.com/simonyouth/react-native-dirtory


初生牛犊==



版权声明:本文为qq_39711712原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。