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

最新推荐文章于 2024-06-21 09:33:29 发布
最新推荐文章于 2024-06-21 09:33:29 发布
阅读量2.9k 收藏
点赞数
分类专栏： react native 文章标签： react native npm.js android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39711712/article/details/79476202
版权
本文介绍如何将一个原生Android模块封装成React Native组件，并发布到npm。首先，在Android Studio中创建新的Android Module，命名为react-native-xxxxxxx。接着，配置build.gradle文件，建立Module并实现ReactContextBaseJavaModule。然后，创建ReactPackage，添加到原项目中进行测试。最后，将组件代码上传到GitHub仓库，并通过npm发布。提供了详细的步骤和注意事项。
摘要由CSDN通过智能技术生成

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

1. 首先，有一个rn项目，用Adnroid Studio打开 android -> app -> build.gradle



如图新建一个 Android Module,名字就取react-native-xxxxxxx,根据功能取吧，包名都可以自定义的。

以react-native-directory为例


2.react-native-directory->build.gradle 中添加依赖 react-native:+

最低0.47元/天 解锁文章
Simon_youth
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
发布自己的react-native组件到npm
qq_17190231的博客
04-09 991
前言 我们在做RN开发时候，会利用npm安装我们需要的三方js库。当我们自己封装了一个组件打算开源给别人用时，同样想用npm来安装，这时候我们需要把自己的组件发布到npm，这样以后再用这个组件时候直接利用（npm i 组件名） 就可以了。好嗨奥！ 第一步：创建自定义组件模版 安装react-native-create-library $ npm install -g react-native-...
react native 自定义组件发布npm
xiao_ci1988的博客
05-22 315
转自
深度探索React Native原生UI组件库 - 构建流畅且高效的应用体验
最新发布
gitblog_00074的博客
06-21 703
???? 深度探索React Native原生UI组件库 - 构建流畅且高效的应用体验 项目地址:https://gitcode.com/sdcxtech/react-native-troika 目录: 项目介绍 技术深度解析 应用场景展示 独特优势剖析 ???? 项目介绍 在现代移动应用开发领域中，追求极致的用户体验与高效率的开发流程成为了每个开发者心中的圣杯。为满足这一需求，我们荣幸地介绍一款集众...
React-Native发布项目到npm
vv_bug
04-20 1563
前言:最近一直在看h5相关的书跟博客,rn偶尔有需求才会动一动,android是真的很少碰了(/忧伤),从h5基础->js->typescript->node->webpack,每天地铁来回两小时的时间我是一点没落下,学习真的是一件很枯燥的东西,贵在坚持,要给自己点鼓励,昨晚还因为自己学习了node,然后写了一个自动发包的小脚本激动了夜晚没睡觉(嗯嗯,就这么点出息了~),所...
React Native 原生模块封装、发布、调用 （Android）
大前端秘籍
11-18 406
想必看到这里的同学都已经完成了，React Native的基础学习。前置知识： React Native 组件实现 android iOS 我们先说一下实现原理：。。。 接下来我们以ToastAndroid为例子，来讲解如何创建原生android/iOS react-native组件。android篇!Step 1 - 新建react-native工程 TestToast$ react-native
如何将React Native组件发布到NPM-比您想象的要容易
cumian9828的博客
08-04 366
by Colby Miller 通过Colby Miller 如何将React Native组件发布到NPM-比您想象的要容易 (How to publish a React Native component to NPM — it’s easier than you think) So you want to contribute to the open source community? ...
testmodule-wyh:React Native封装iOSAndroid原生组件，并整理成npm package
04-27
【React Native封装iOSAndroid原生组件并发布为npm package】 React Native是一种流行的开源框架，它允许开发者使用JavaScript和React库来构建原生的移动应用程序。本项目“testmodule-wyh”是一个实例，展示了如何...
react native 轮播组件
11-23
React Native 是一个由Facebook开发的开源框架，它允许开发者使用JavaScript和React来构建原生的移动应用程序。在React Native中，我们经常会遇到需要实现动态、交互式的轮播效果，这通常通过轮播组件来实现。标题...
react-native封装插件swiper的使用方法
11-26
react-native-swiper 是一个在React Native环境中用于创建滑动轮播图组件的库，它可以实现类似于iOS和Android原生应用中的轮播效果。这个库提供了丰富的功能，包括但不限于自动轮播、滑动指示器（小圆点）、手势操作...
一个用于react native 页面加载的loading组件 iOS
04-06
7. **集成到项目**：要将此组件集成到React Native项目中，开发者需要通过`npm`或`yarn`安装，然后在项目中导入并使用它，可以通过props来传递参数，如加载文本、颜色等。 8. **源码分析**：通过查看`react-native-...
ReactNative和AndroidiOS原生项目集成实验项目
08-10
React Native将React的声明式编程模型带到移动平台，将JavaScript代码编译成原生组件，从而提供了接近原生的性能和用户体验。React Native的组件化开发模式使得UI设计变得高效，同时它支持热重载，提高了开发效率。 ...
Android专有GitHook完结篇，发布到npm
知足常乐
10-25 1533
今天，我们就一起把前边实现的功能，发布至npm，通过npm简单的命令，提供给别人下载使用。
RN发布组件到npm
双手成就你的梦想
05-22 631
1.git新建项目2.npm adduser3.npm publish中间有个报错，需要镜像切换npm config set registry https://registry.npmjs.org/        npm config set registry https://registry.npm.taobao.org  淘宝镜像错误2：在adduser的时候会报错，说明该用户已经存在，可以换...
npm安装react native组件出错
peach
04-25 486
使用npm安装rn组件，报错。使用yarn add 也失败。 If you are behind a proxy, please make sure that the npm ERR! network ‘proxy’ config is set properly. See: ‘npm help config’ 错误信息如下 解决方法 npm config...
native封装卡片 react_react-native从头开始封装三方sdk（一）
weixin_42510271的博客
01-11 253
1.新建项目demoreact-native init democd demoreact-native run-android(想尽一切方法把项目跑起来，这一步都过不了的话后面就不用看了)2.工欲善其事，必先利其器。要想飞我们先学会爬。我们先实现JS调用原生方法(1)使用Android Studio打开demo->android (2)新建一个Module，添加一个名为Testlibrary...
【react-native-0.31-iOS】封装原生组件并调用（02）
刘海阳的博客
08-17 2328
由于RN上的现有组件不能满足我们的日常开发需求，所以我们要自己动手去封装一些组件。 1.在React Native中，一个“原生模块”就是一个实现了“RCTBridgeModule”协议的Objective-C类（跟人理解RCTBridgeModule就是react与native之间的桥）,下面我们来创建一只猫。#import "CreatCat.h" @implementation CreatCa
react-native自定义原生组件
weixin_34296641的博客
10-18 253
此文已由作者王翔授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。使用react-native的时候能够看到不少函数调用式的组件，像LinkIOS用来呼起url请求 LinkIOS.openUrl('http://www.163.com');actionSheetIOS用来实现ios客户端底部弹起的选择对话框ActionSheetIOS.showActionSheetWithO...
React Native笔记(一)：封装android原生列表组件给rn使用
ZBM来了
03-21 3530
背景 react native官方提供的FlatList与原生RecyclerView相比： 仅创建可见区域的视图，两者是一致的。 FlatList没有cell recycling，重用item view。 FlatList中将不可见的视图从内存中移除，但同时也会导致大量的视图重新创建以及垃圾回收。如果不断的创建视图，在列表滚动的过程中，内存占用量会不断增加。而原生的recyclerview因为能复用视图，所以在快速滑动的时候性能上影响不大。并且rn又支持封装原生组件给rn使用，于是产生了封装recyc
reactnative 调用原生ui组件
ln1010的博客
02-01 830
react native 调用原生UI组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值