react native 安装插件

彭高畅
2023-12-01

RN插件

1、字体库icons npm i react-native-vector-icons --save (要关联 rnpm link)

2、字符串string npm i query-string --save

3、字符串替换lodash npm i lodash --save

4、视频播放video npm i react-native-video --save

5、按钮button npm i react-native-button --save

6、倒计时countdown npm install rn-countdown --save 或者 npm install react-native-sk-countdown@1.0.1 --save (需要修改一下)

7、选择照片picker npm i react-native-image-picker --save (要关联 rnpm link)

8、sha1加密 npm i sha1 --save

9、进度条progress npm i react-native-progress --save

10、uuid npm i uuid --save

11、录音audio npm i react-native-audio --save (要关联 rnpm link)

12、播放声音sound npm i react-native-sound --save (要关联 rnpm link)

13、轮播图swiper npm i react-native-swiper --save

14、immutable不可变数据 npm i immutable --save

15、navigation和redux整合 npm i react-native-navigation-redux-helpers --save

16、navigation导航 npm i react-native-navigation --save

16、navigation导航(现用) npm i react-navigation --save

17、redux数据处理 npm i react-redux --save

18、redux npm i redux --save

19、redux和immutable整合 npm i redux-immutable --save

20、redux和logger打印 npm i redux-logger --save

21、redux和actions动作 npm i redux-actions --save

22、redux和promise npm i redux-promise --save

23、redux和thunk npm i redux-thunk --save

24、获取设备信息组件 npm i react-native-device-info --save

 

 

手动添加ART工程依赖

步骤1:

点击iOS工程文件 --》选择Libraries --》Add Files To xx --》选择“项目名“ --》选择node_modules

--》选择react-native --》选择react-native --》选择Libraries --》选择ART --》选择ART.xcodeproj

--》点击 Add

步骤2:

--》选中项目目录 --》Build Phases --》Link Binary With Labraries --》添加ART.a

 

 

========================================================================

RN项目启动流程

启动 IOS APP项目-》到项目根目录 -》react-native run-ios

 

koa服务器启动-》到项目根目录 -》node app

要开启mongo才可以运行

 

 

RN 组件

 

react-native-linear-gradient 颜色渐变处理

react-native-login  视频界面登录

react-native-keyboard-aware-scroll-view 键盘显示处理

react-native-popup-dialog 弹窗

react-native-dropdownalert 一种非常漂亮的alert弹窗方式,从状态栏往下弹窗;

react-native-simple-radio-button 单选按钮;

react-native-swiper

react-native-macos macos桌面应用

react-native-wechat 集成微信相关SDK

react-native-modalbox  模态弹窗

react-native-touch-id 指纹登录

react-native-prompt 可输入文字的弹窗

react-native-sqlite-storage sqlite数据库存储

react-native-permissions 权限检查

react-native-progress-hud loading圈

react-native-snackbar 类似toast的弹窗模式

react-native-qrcode-svg 二维码生产工具

native-base UI组件

react-native-busy-indicator loading圈

react-native-fit-image 图片展示优化

react-native-timer 定时器管理

react-native-scrollable-tab-view 可以左右滑动的tab

react-native-zip-archive 解压工具

react-native-xml2js

react-native-spinkit 好看的loading圈

react-native-interactable 有很强交互效果的table视图

react-native-pull-to-refresh 下拉刷新效果

react-native-deck-swiper 不错的swiper效果

react-native-prefix-picker select效果

react-native-gesture-helper 手势 向上还是向下 还是向左

react-native-drawer-layout 抽屉效果

react-native-sortable-listview 可拖拽排序的列表视图

react-native-progress 进度条 长方形 圆形

react-native-splash-screen 启动屏处理

react-native-masked-text 指定格式的输入框

react-native-keyboard-manager 针对IOS 键盘遮挡的问题 俺可以这么用android:windowSoftInputMode="adjustResize"

react-native-beacons-manager 蓝牙处理

react-native-fetch-blob  文件获取

react-native-popup-menu 弹出菜单

react-native-pathjs-charts 图表

react-native-dates 日历日期选择工具

react-native-calendar-strip 一种简单的日历处理

react-native-simple-markdown 简单的markdown文本编辑器

react-native-image-progress 进度条

react-native-img-cache 图片缓存技术

rn-placeholder 在展示具体的文字和图片之前有个加载样式处理

react-native-pie-chart 饼状图

react-native-maps 地图

react-native-loading-overlay loading圈加载遮罩

 

react-native-globalize 国际化

react-native-create-bridge CLI工具,轻松地桥接React Native模块和UI组件

react-native-splash-screen 启动白屏优化

react-native-linear-gradient 渐变色

react-native-smart-sortable-sudoku-grid 拖拽1

react-native-sortable-grid 拖拽2

()[https://github.com/react-native-component/react-native-smart-barcode]

React-native-animatable 动画

react-native-carousel 轮播

react-native-countdown 倒计时

react-native-device-info 设备信息

react-native-fileupload 文件上传

react-native-icons 图标

react-native-vector-icons 自定义图标文字

react-native-keychain iOS KeyChain管理

react-native-picker滚轮选择器

react-native-picker-Android Android 滚轮选择器

react-native-refreshable-listview 可刷新列表

react-native-scrollable-tab-view 可滚动标签

react-native-side-menu 侧栏

react-native-swiper 轮播

react-native-video 视频播放

react-native-viewpager 分页浏览

react-native-scrollable-tab-view 可滑动的底部或上部导航栏框架

react-native-tab-navigator 底部或上部导航框架(不可滑动)

react-native-check-box CheckBox

react-native-splash-screen 启动白屏问题

react-native-simple-router 简易路由跳转框架

react-native-storage 持久化存储

react-native-sortable-listview 分类

瀑布流 https://github.com/junhaotong/react-native-waterfall

ListViewreact-native-htmlview 将 HTML 目录作为本地视图的控件,其风格可以定制

React Native 应用在键盘弹出时优雅地响应 https://blog.csdn.net/sinat_17775997/article/details/72953940

{

仿写百思不得姐 https://github.com/spicyShrimp/Misses

React Native 实现瀑布流列表页,分组+组内横向的列表页….. https://blog.csdn.net/spicyshrimp/article/details/80609373

}

React Native电商项目实战——开篇 https://www.jianshu.com/p/2618d8bb0bb0 https://blog.csdn.net/p44w0azwmb3g8au33/article/details/80589180

基于react-native的电商项目iOS端和Android端均可运行,包含类淘宝选择商品,支付宝接入,购物车,瀑布流,省市区选择器等功能

https://github.com/zt1993/ZTShop-React-Native

仿天猫商品类目分类列表页面 https://github.com/guangqiang-liu/react-native-categoryListDemo

react-native-easy-toast 一款简单易用的 Toast 组件(Android&iOS)

选项卡 https://github.com/exponentjs/react-native-tab-navigator

点击打开链接* material组件库(各种漂亮的小组件)https://github.com/xinthink/react-native-material-kit

base组件库(各种封装不错的小组件)http://nativebase.io/docs/v0.4.6/components#anatomyhttps://github.com/GeekyAnts/NativeBase

不错的按钮 https://github.com/mastermoo/react-native-action-buttonhttps://github.com/ide/react-native-button

输入框表单验证https://github.com/gcanti/tcomb-form-nativehttps://github.com/FaridSafi/react-native-gifted-formhttps://github.com/bartonhammond/snowflake

炫酷效果的 TextInputhttps://github.com/halilb/react-native-textinput-effectshttps://github.com/zbtang/React-Native-TextInputLayout

聊天https://github.com/FaridSafi/react-native-gifted-chat

地图https://github.com/lelandrichardson/react-native-maps

动画https://github.com/oblador/react-native-animatable

加载动画https://github.com/maxs15/react-native-spinkit

抽屉效果https://github.com/root-two/react-native-drawer

https://github.com/react-native-fellowship/react-native-side-menu

侧滑按钮https://github.com/dancormier/react-native-swipeouthttps://github.com/jemise111/react-native-swipe-list-view

图表https://github.com/tomauty/react-native-chart

下拉放大https://github.com/lelandrichardson/react-native-parallax-view

可滑动的日历组件https://github.com/cqm1994617/react-native-myCalendar

语言转化和一些常用格式转换https://github.com/joshswan/react-native-globalize

单选多选ListViewhttps://github.com/hinet/react-native-checkboxlist

选择按钮https://github.com/sconxu/react-native-checkbox

二维码https://github.com/ideacreation/react-native-barcodescanner

制作本地库https://github.com/frostney/react-native-create-library

影音相关https://github.com/MisterAlex95/react-native-record-sound* 安卓

录音https://github.com/bosung90/react-native-audio-android

提示消息的Barhttps://github.com/KBLNY/react-native-message-bar* iOS原生TableViewhttps://github.com/aksonov/react-native-tableview

点击弹出视图https://github.com/jeanregisser/react-native-popover

https://github.com/instea/react-native-popup-menu

3D Touch https://github.com/madriska/react-native-quick-actions

双平台兼容的ActionSheethttps://github.com/beefe/react-native-actionsheet

照片墙https://github.com/ldn0x7dc/react-native-gallery

键盘遮挡问题https://github.com/reactnativecn/react-native-inputscrollview

https://github.com/wix/react-native-keyboard-aware-scrollview

本地存储https://github.com/sunnylqm/react-native-storage

星星https://github.com/djchie/react-native-star-rating

国际化https://github.com/joshswan/react-native-globalize

扫描二维码https://github.com/lazaronixon/react-native-qrcode-reader

https://github.com/react-native-component/react-native-smart-barcode

通讯录https://github.com/rt2zz/react-native-contacts

加密https://www.npmjs.com/package/crypto-js

缓存管理https://github.com/reactnativecn/react-native-http-cache

ListView的优化https://github.com/sghiassy/react-native-sglistview

图片和base64互转https://github.com/xfumihiro/react-native-image-to-base64

安卓 iOS 白屏解决https://github.com/mehcode/rn-splash-screen

Text跑马灯效果https://github.com/remobile/react-native-marquee-label

清除按钮的输入框https://github.com/beefe/react-native-textinput

WebView相关https://github.com/alinz/react-native-webview-bridge

判断横竖屏https://github.com/yamill/react-native-orientation

PDF https://github.com/cnjon/react-native-pdf-view

获取设备信息https://github.com/rebeccahughes/react-native-device-info

手势放大缩小移动https://github.com/kiddkai/react-native-gestures

https://github.com/johanneslumpe/react-native-gesture-recognizers

下拉-上拉-刷新https://github.com/FaridSafi/react-native-gifted-listview

https://github.com/jsdf/react-native-refreshable-listview

https://github.com/greatbsky/react-native-pull/wiki

下拉选择https://github.com/alinz/react-native-dropdown

图片查看https://github.com/oblador/react-native-lightbox

照片选择https://github.com/marcshilling/react-native-image-picker

打开相册 https://github.com/ivpusic/react-native-image-crop-picker

图片加载进度条https://github.com/oblador/react-native-image-progress

轮播视图https://github.com/race604/react-native-viewpager

https://github.com/FuYaoDe/react-native-app-intro

https://github.com/appintheair/react-native-looped-carousel

https://github.com/leecade/react-native-swiper

模态视图https://github.com/maxs15/react-native-modalbox

https://github.com/brentvatne/react-native-modal

https://github.com/bodyflex/react-native-simple-modal

毛玻璃效果https://github.com/react-native-fellowship/react-native-blur

头像库https://github.com/oblador/react-native-vector-icons

滑动选项卡https://github.com/skv-headless/react-native-scrollable-tab-view

自定义js组件(单行多行文本 按钮 分段按钮 滑块 进度条 省市区联动 日历。。。) (demo)

https://github.com/acidb/mobiscroll

https://demo.mobiscroll.com/

 

---------------------

链接:https://www.jianshu.com/p/5840ea816464

來源:简书

---------------------

 

 

 

可通过下面链接直接搜索你想要的icons

 

https://ionicframework.com/docs/ionicons/

 

---------------------

原文:https://blog.csdn.net/jiecsdn/article/details/60867232

---------------------

 

 类似资料: