搭建一个RN组件库

你应该知道的 10 个 React Native 组件库 它同时支持旧的和最新的 React Native 版本,它提供了 20 多个自定义组件,其中一些组件(例如 )Drawer可以轻松集成以构建现代的可滑动列表,例如 Gmail 应用程序的收件箱。您可以通过组合它们来构建复杂的 UI。这些库的存在是为了让您的开发更快,并提供一种健壮的方式来构建应用程序,这样您就不会在每次创建新的 React Native 应用程序时都重新发明轮子。如果多个组件库适合您的设计或开发目标,那么选择具有良好的开发人员支持、积极的开发时间表和精心编写的文档的组件库是一个不错的决定。 阅读详情

1.开始搭建空白组件

搭建一个组件最好的方法就是本地测试通过后上传到私有库,然后再安装到app上发布上架。

但是我们这是一个全局基础组件,所以不可能每个功能都写一个组件,这样的话我们需要把全局基础组件整成一个集合,但是我们的全局基础组件库也会依赖别的三方组件。这样就产生了下面的组件库结构

└── react-native-xxxxxx
    ├── README.md
    ├── android
    │   ├── build.gradle
    │   └── src
    │       └── main
    │           ├── AndroidManifest.xml
    │           └── java
    │               └── com
    │                   └── reactlibrary
    │                       ├── RNCardviewModule.java
    │                       └── RNCardviewPackage.java
    ├── index.js
    ├── ios
    │   ├── RNCardview.h
    │   ├── RNCardview.m
    │   ├── RNCardview.podspec
    │   ├── RNCardview.xcodeproj
    │   │   └── project.pbxproj
    │   └── RNCardview.xcworkspace
    │       └── contents.xcworkspacedata
    └── package.json

RN组件库 - Button 组件 从零构建 React Native 组件库,作为一个前端er 谁不想拥有一个自己的组件库 阅读详情

相关推荐

RN 的UI框架对比

为了方便写文档,将上面的4个库,取个简写名称哦豁 Antd 有中文文档,不用比了就选他。哈哈哈。开个小玩笑,不过中文的开发文档确实是个加分项。在 React Native 开发中,NativeWind、Gluestack UI、React Native Reusables、React Native Elements 和 react-native-ui-lib、Ant Design Mobile RN 是六个不同类型的组件库或工具,它们的定位、功能和适用场景各有不同。

zrina1314的专栏 1990

去哪儿网 ReactNative 跨小程序多端方案介绍

1 前言 qrn-remax-unir 是由去哪儿网前端技术团队实现的一套将 RN 适配到小程序端的跨端组件,通过该组件库可快速方便的将 RN 源代码直接运行到小程序端。方案参考了 react-native-web 的适配方案,使用 remax 框架来实现适配组件库并达到适配多小程序的目的。和 react-native-web一样,它对 RN 源代码侵入度低,并且调试和替换组件相当方便。 方案来自于社区,我们只是合理的应用用来解决我们遇到的业务问题,最终开发了这套组件库,也希望开源出来跟大家分享和共同探讨多

去哪儿网技术沙龙 1373

RN项目的坑 (M1 Mac)

使用M1 处理器的 MacBook Pro 做RN项目的坑 在使用Taro 3.0 做Rn项目时 ,clone Android & iOS 壳子 后 用 CocoaPods 安装iOS依赖 pod install 时 报错如下: 在报错信息后面可以看到有官方的git issue 可以进行搜索 针对当前问题的url已经完整输出,可以自行查找问题 博主问题主要集中于 对M1芯片兼容的 处理办法 。 sudo arch -x86_64 gem install ffi arch -x86_64 pod i

henryzyk的博客 802

HarmonyOS 实战开发 —— 基于RN框架实现高性能瀑布流页面

本文针对应用开发中相当常见的瀑布流页面场景,基于按需渲染、组件复用等技术,使用RN框架实现了高性能瀑布流页面。本文提供详细的开发步骤,帮助开发人员高效实现高性能瀑布流页面。

CTrup的博客 1435

React Native第三方组件库汇总

技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里即可获取!!!。,我觉得成年人,何必做选择题呢,两个都要。

2301_76348171的博客 4663

react-native环境搭建Android篇

如果想要成为架构师或想突破20~30K薪资范畴,那就不要局限在编码,业务,要会选型、扩展,提升编程思维。此外,良好的职业规划也很重要,学习的习惯很重要,但是最重要的还是要能持之以恒,任何不能坚持落实的计划都是空谈。如果你没有方向,这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》,帮大家将杂乱、零散、碎片化的知识进行体系化的整理,让大家系统而高效地掌握Android开发的各个知识点。

m0_59236216的博客 1078

HarmonyOS 开发实践 —— 基于RN框架实现高性能瀑布流页面

本文针对应用开发中相当常见的瀑布流页面场景,基于按需渲染、组件复用等技术,使用RN框架实现了高性能瀑布流页面。本文提供详细的开发步骤,帮助开发人员高效实现高性能瀑布流页面。

liuhaojiabin的博客 1427

ReactNative进阶(四十二):面试必备:2024 ReactNative 经典面试题总结(含答案(2)

根据路线图上的重点去进行有针对性的学习,在学习过程中,学会写笔记,做总结。开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记Vue 学习笔记。

2401_84616191的博客 1214

React Native (RN)的学习上手教程

React Native (RN)的学习上手教程

m0_72030584的博客 1629

RN与Metro

本文摘要:React Native(RN)是一个基于React的跨平台移动应用开发框架,允许开发者使用JavaScript编写代码并生成iOS/Android原生应用。RN开发流程依赖Metro打包工具,将JS代码打包成bundle文件供移动端执行。Metro在开发模式下监听8087端口,提供热更新功能,但存在安全隐患:默认无鉴权、监听所有IP,导致目录遍历等漏洞风险。RN具有开发效率高、热更新等优势,但也面临JS代码易反编译、调试工具安全防护薄弱等问题。文章详细分析了Metro的四层路由架构及其安全攻击面

fencecat的博客 386

cc-ui|一款基于uni-app框架开发的生态组件库

一、web前端行业发展史 自互联网行业发展以来,web前端不断的发展和变化着。 在前人的基础上,后人有幸能够站在前人的肩膀上行走。前端的发展变化不仅是继承式的迭代,同时也是不断地变革和创造。 JavaScript Logo 至今,web前端开发中得到了很大的提升: 从1990年,WWW(万维网)的诞生到1992年,NCSA研发了第一个浏览器:Mosaic,可以窗口浏览网页;1994年,Tim Berners - Lee创建了W3C理事会。 JavaScript Brendan Eic

颜端遥。 781

React Native组件库推荐:20个必备UI组件提升开发效率

本文聚焦React Native开发者的**“开发效率痛点”**:重复造轮子(如按钮、输入框)、多端样式不一致、复杂交互实现困难。通过推荐20个经过社区验证的优质组件库,覆盖从基础到高级的全场景需求,帮助开发者跳过“造组件”阶段,直接进入“用组件”的高效开发模式。本文先通过“建房子”比喻解释组件库的价值,再按功能场景分类推荐20个组件库(附核心功能+代码示例),最后通过实战案例演示如何集成使用,解答“选哪个”“怎么用”“何时用”的关键问题。想象你要建一栋房子:如果每次都要自己烧砖、砍木头、做门窗,工期会很长

移动开发前沿的博客 2849

【HarmonyOS NEXT应用开发】案例140:基于RN框架实现高性能瀑布流页面

本案例针对瀑布流页面场景,基于@react-native-oh-tpl/flash-list、axios等框架,实现了一个高性能的瀑布流页面,该案例提供了关键的开发步骤,旨在帮助开发者高效开发出高性能的瀑布流页面。详情请查看。名称版本号0.72.270.0.26rnoh5.0.0.302及以上5.0.0.302及以上页面:页面渲染最大数≤300页面组件嵌套层数≤30。

xzs51job的专栏 1023

antd-mobile-rn:一个基于 Ant Design Mobile RN 的 UI 组件库

Ant Design Mobile RN Ant Design 移动端设计规范。@sishuguojixuefu/antd-mobile-rn 是 Ant Design 的移动规范的 React 实现,服务于蚂蚁及口碑无线业务。 通知 新版本3.x已经重构完成并发布,安装升级请查看 特性 基于 Ant Design 移动设计规范。 规则化的视觉样式配置,适应各类产品风格。 基于 React Native 的多平台支持。 使用 TypeScript 开发,提供类型定义文件。 演示 请先安装 expo app: 安装 & 使用 npm install @sishuguojixuefu/antd-mobile-rn --save or yarn add @sishuguojixuefu/antd-mobile-rn 链接字体图标 react-native link @ant-design/ico

react-native-create-library:使用单个命令创建React Native库的命令行工具

React本地创建库 使用单个命令创建React Native库的工具。 你为什么需要这个? 如果您要为React Native创建本机模块,则需要为要支持的每个平台提供一些本机代码,然后需要一些JavaScript代码将其绑定在一起。 自行设置此设置可能很耗时。 这是此工具的用武之地。它创建了一个样板,同时考虑了所有当前的最佳实践。 为什么不使用react-native new-library ? 不幸的是,该命令不会创建最新的库,它需要一个已经初始化的React Native项目,并且只能设置iOS方面的内容。 警告:这只会创建没有视图组件的本机模块。 备择方案 安装 要求:Node

MediaCodec视频解码流程详解及参考demo

本文主要讲解mediacodec的视频解码流程,及demo参考例子。

分享音视频技术 7877

实战复盘:如何用Frida脚本绕过某书APP的libmsaoaidsec.so检测(附完整Hook代码)

本文深入探讨了如何利用Frida脚本绕过某书APP通过libmsaoaidsec.so实现的反Frida检测机制。通过分析动态链接过程中的关键节点和检测模式,提供了两种实战验证的绕过方案:动态Hook关键链接器函数和静态Patch SO文件。文章还分享了进阶对抗策略和调试技巧,帮助安全研究人员有效应对现代移动安全防护挑战。

weixin_42706667的博客 219

ArcGIS+PLUS+InVEST三件套实战:从零搞定土地利用变化与碳储量预测(附完整数据包)

本文详细介绍了如何整合ArcGIS、PLUS模型和InVEST模型,构建土地利用变化与碳储量预测的完整研究流水线。通过多情景模拟和生态系统服务评估,提供从数据准备到结果验证的实战指南,助力研究者高效完成生态评估项目。

weixin_30399821的博客 544

Android开发中StateFlow与LiveData的5个关键区别及实战避坑指南

本文深度解析了Android开发中StateFlow与LiveData的5个核心区别,包括设计哲学、生命周期管理、值更新策略、线程模型及协程生态整合。通过实战代码对比,为开发者在现代MVVM架构下的状态管理选型提供清晰的决策指南和避坑建议,帮助构建更健壮、可测试的应用。

weixin_29012677的博客 405

加权均值向量算法(INFO)详解:从数学原理到智能算法

本文系统介绍了加权均值向量算法(INFO)的理论基础、数学模型与实现应用。该算法基于加权均值数学概念,通过MeanRule规则平衡探索与开发能力,具有结构新颖、参数合理的特点。核心内容包括:1) 算法理论基础,阐述加权均值数学定义与小波函数权重计算;2) 算法原理,详细解析更新规则、向量组合和局部搜索三阶段数学模型;3) 实现方法,提供MATLAB代码关键参数解析;4) 改进方向,介绍INFO-KELM混合模型等变体;5) 应用案例,涵盖函数优化、工程设计与机器学习领域。

qq_42212808的博客 235

基于 ESP32 的宿舍洗浴热水余量预测与智能排队提醒系统设计与实现

本系统以 ESP32 为主控核心,通过超声波液位传感器实时监测储热水箱剩余水量,配合 DS18B20 温度传感器采集水温数据,建立热水余量预测模型估算可用洗浴时长;同时通过红外人体传感器统计浴室排队人数,结合人均洗浴时长计算预计等待时间,并通过 OLED 屏本地显示 + WiFi Web 服务器远程推送的方式实现排队提醒功能。

weixin_42300449的博客 45

rk3399开发环境的介绍

由于Bluez的介绍文档有限,以及对Linux 系统/驱动概念、D-Bus 通信和蓝牙协议都有要求,加上网络上其实没有一个完整的介绍Bluez系列的文档,所以不管是蓝牙初学者还是蓝牙从业人员,都有不小的难度,学习曲线也相对较陡,所以我有了这个想法,专门对Bluez做一个系统性的介绍,尽可能的涵盖所有内容。

朝气蓬勃 711

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

上一篇: Safari打开官网自动打开app
下一篇: iOS图片加载渲染的优化
develop_csdn_LGQ
博客等级 码龄10年 21粉丝 61原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值