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

本文介绍如何将一个原生Android模块封装成React Native组件,并发布到npm。首先,在Android Studio中创建新的Android Module,命名为react-native-xxxxxxx。接着,配置build.gradle文件,建立Module并实现ReactContextBaseJavaModule。然后,创建ReactPackage,添加到原项目中进行测试。最后,将组件代码上传到GitHub仓库,并通过npm发布。提供了详细的步骤和注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

初生牛犊==

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值