ReactNativeMaterials
React Native优秀博客,以及优秀的Github库列表(很多英文资料源自于awesome-react-native)
关于开源库类
- Star 100+
🔥 - Star 200+
🔥 🔥 - Star 500+
🔥 🔥 🔥 - Star 1000+ 🔥🔥🔥🔥
- Star 2000+
🔥 🔥 🔥 🔥 🔥
关于博客和视频类
- 值得读读
⭐️ - 建议阅读
⭐️ ⭐️ - 强烈推荐
⭐️ ⭐️ ⭐️
目录
网址
- 源代码
- 官方文档
- react-native-training 很好的RN在线学习资料
⭐️ ⭐️ ⭐️ - React Native中文网
- StackOverFlow ReactNative相关问题
- React-China社区
- Use React Native 资讯站
- Programming React Native 一本入门教程的书
- CSDN React Native知识库
- Use React Native Blog
- Facebook Code Blog
- Qunar React Native 去哪儿定制版 React Native,更快、更好、更统一。
- 阮一峰老师的博客 阮老师在JS的讲解上深入浅出,非常适合学习JS。
开源App
- 官方Demo App
- f8app Facebook官方开发的,强烈推荐
🔥 🔥 🔥 🔥 🔥 - 30-days-of-react-native 写了30个小项目,来学习React Native,强烈推荐
🔥 🔥 🔥 - GitHubPopular 这是一个用来查看GitHub最受欢迎与最热项目的App,它基于React Native支持Android和iOS双平台
- HackerNews-React-Native HackerNews的客户端
🔥 🔥 🔥 🔥 🔥 - react-native-gitfeed 一个github客户端
🔥 🔥 🔥 🔥 - ZhiHuDaily-React-Native 知乎日报的客户端
🔥 🔥 🔥 🔥 🔥 - noder-react-native cnodejs.org的App
🔥 🔥 🔥 🔥 - react-native-dribbble-app Dribbble app
🔥 🔥 🔥 🔥 - Reading 一个值得借鉴的学习工程
🔥 🔥 🔥 - react-native-nba-app 查看NBA比赛信息和数据的APP
🔥 🔥 🔥 🔥 - ReactNativeNews 一个简单的新闻客户端 🔥🔥
- react-native-demo 模仿天猫首页的Demo 🔥🔥
- ReactNativeRedditReader RedditReader
🔥 🔥 - FinanceReactNative 金融股票类App
🔥 🔥 🔥 - react-native-nw-react-calculator mobile,desktop,website通用的代码写的计算器
🔥 🔥 🔥 🔥 🔥 - snowflake 用Redux, RN Router,Parse写的App。 🔥🔥🔥🔥🔥
- lumpen-radio WLPN 105.5 Chicago 🔥
- react-native-sudoku 数独游戏
🔥 🔥 🔥 🔥 - TaskRabbit's Sample App Task Rabbit的Demo App
- PhotosReactNative 一个带图案锁屏的开源看图App
- movieapp 查看电影和电视节目的App
🔥 🔥 - what_the_thing 通过摄像头来学习“这是什么东西”
🔥 🔥 - react-native-live-translator AR应用,实时翻译摄像头中看到的信息
- 虎扑社区 虎扑社区
🔥 - vecihi Build Your Own Photo Sharing App in 5 minutes
- react-weather 基于React Native和Realm的天气应用
Libraries
综合
- storybook
🔥 🔥 🔥 🔥 🔥 为React和React Native提供交互式开发和测试环境 - awesome-react-native 老外搜集的优秀的React Native文章,库(资料很全)
🔥 🔥 🔥 🔥 🔥 - react-native-guide 一国内小哥搜集的React Native的参考资料
🔥 🔥 🔥 🔥 🔥 - React-native组件库js.coach 🔥🔥🔥🔥🔥
- React Native Package Manager
🔥 🔥 🔥 🔥 🔥 - react-native-desktop 为MacOS开发提供的React Native开发包 🔥🔥🔥🔥🔥
- tcomb-form-native 生成React native froms
🔥 🔥 🔥 🔥 - React Native training Github Book,入门级资料
🔥 🔥 - pepperoni-app-kit React Native App 开发的一组通用组件
🔥 🔥 🔥 🔥 - haul 辅助开发React Native的命令行工具
🔥 🔥 🔥 🔥 - react-native-rename 命令行重命名App名称
- native-starter-kit React Native + NativeBase + React Navigation + Redux + CodePush (iOS & Android) 开发的App
- eact-native-i18n React Native + i18n.js
- sketch-to-react-native 把Sketch转换成React Native的Component
- reactxp App跨平台开发方案
🔥 🔥 🔥 🔥 🔥
UI
-
React-Native-Elements 一组开发RN的UI工具包(强烈推荐) 🔥🔥🔥🔥🔥
-
NativeBase UI工具包
🔥 🔥 🔥 🔥 🔥 -
react-native-ui-lib UI工具包
🔥 🔥 🔥 -
teaset UI工具包
-
Shoutem UI Shoutem开发的UI工具包
🔥 🔥 🔥 🔥 -
react-native-root-toast 纯JS写的Toast
🔥 🔥 🔥 -
react-native-calendars 🔥🔥🔥🔥 优秀的日历控件
-
react-native-gifted-chat 聊天相关UI
🔥 🔥 🔥 🔥 🔥 -
react-native-scrollable-tab-view 可滚动的TabView
🔥 🔥 🔥 🔥 🔥 -
lottie-react-native 支持RN的lottie,用来直接播放AE输出的JSON动画
🔥 🔥 🔥 🔥 🔥 -
apsl-react-native-button 定义了一个Button支持用Style来配置
🔥 🔥 -
react-native-action-button 支持多种点击事件的Button控件
🔥 🔥 -
react-native-button 另一个Button组件 🔥🔥
-
ex-navigator 封装Navigator,以Route为中心的Navigator 🔥🔥
-
gl-react-native React Native中使用OPENGL来实现复杂的图片和components渲染
🔥 🔥 🔥 -
react-native-calendars
🔥 🔥 🔥 🔥 🔥 日历 -
react-native-datepicker 时间选择
🔥 🔥 🔥 🔥 -
react-native-activity-view iOS上的分享和action sheets组件
🔥 🔥 -
react-native-app-intro 引导页
🔥 🔥 -
react-native-blur 添加模糊或者毛玻璃效果
🔥 🔥 🔥 -
react-native-chart 绘图(折线图,柱状图,扇形图)
🔥 🔥 🔥 -
react-native-circular-progress 圆形的显示进度的视图
🔥 -
react-native-collapsible 可折叠的component
🔥 -
React Native Drawer 抽屉效果,可 用来实现侧拉菜单 🔥🔥🔥
-
react-native-dropdown下拉菜单
🔥 -
ReactNativeEffectsView 封装了iOS 8上的UIVisualEffectViews,在React Native中实现毛玻璃效果
🔥 -
react-native-gesture-password 手势解锁,支持iOS和Android
🔥 -
react-native-gifted-form 在React Native中方便的使用表格
🔥 🔥 -
react-native-gifted-listview 下拉刷新和上拉加载的ListView 🔥🔥
-
react-native-gifted-messenger 方便的实现聊天UI
🔥 🔥 🔥 🔥 -
react-native-grid-view 网格视图,类似iOS中的UICollectionView
🔥 -
react-native-image-picker 用Native UI来选择图片或者拍照
🔥 🔥 🔥 -
react-native-keyboard-spacer 适用于iOS的根据键盘自动调整输入框 🔥🔥
-
react-native-keyboardevents 监听键盘显示/隐藏 🔥
-
react-native-lightbox 图片全屏预览
🔥 🔥 🔥 -
react-native-looped-carousel 视图轮播
🔥 🔥 -
react-native-mapbox-gl 地图 🔥🔥
-
react-native-maps 地图
🔥 🔥 🔥 🔥 -
react-native-material-design material design 🔥🔥🔥
-
react-native-material-kit 一组UI Components,为了介绍 Material Design
🔥 🔥 🔥 🔥 -
react-native-modalbox 用于模态显示的Component
🔥 🔥 -
react-native-orientation 监听设备旋转
🔥 -
react-native-parallax parallax效果
🔥 -
react-native-parallax-scroll-view 视差滚动效果的ScrollView,支持固定header
-
react-native-picker 选择器,可用于实现时间选择,区域选择
🔥 -
react-native-popover 弹出气泡框的Component
🔥 -
react-native-progress-hud ProgressHUD
🔥 -
react-native-refresher 支持下拉刷新的listview
🔥 🔥 -
react-native-router类似Navigator的导航控制器 🔥🔥🔥🔥
-
react-native-scrollable-tab-view 支持左右滚动的来切换tab的tableview
🔥 🔥 🔥 🔥 -
react-native-controllers 封装了 原生的iOS 导航栏,tabbar,抽屉效果等。 🔥🔥
-
react-native-search-bar 封装iOS原生UISearchBar
🔥 🔥 -
react-native-spinkit 一组Activity指示器
🔥 🔥 -
react-native-splashscreen App载入视图,启动后自动隐藏
🔥 -
react-native-svgkit 显示SVG格式图片
🔥 🔥 -
react-native-swipeout 类似TableViewCell的左滑删除,支持Component滑动
🔥 🔥 🔥 -
react-native-swiper 视图轮播,上下/左右滑动组件,类似UICollectionView
🔥 🔥 🔥 🔥 -
react-native-tableview 封装iOS原生UITableview
-
react-native-vector-icons 3000+支持自定义的图标
🔥 🔥 🔥 🔥 -
react-native-sglistview 为了解决React Native中ListView的内存问题
🔥 -
react-native-invertible-scroll-view 逆向的ScrollView,从底部开始布局,适用于聊天等向上滑动来加载更多的情况 🔥
-
react-native-viewpager 视图轮播,支持循环滚动,自定义视图。已做性能优化
🔥 🔥 🔥 -
react-native-tab-navigator TabBar切换视图 🔥🔥
-
react-native-loading-spinner-overlay 加载中的提示spinner 🔥,支持iOS/Android
-
react-native-color-picker iOS/Android通用的颜色选择器
-
react-native-pathjs-charts - 基于react-native-svg 和 paths-js写的iOS,Android通用的绘图库 🔥
-
react-native-gl-model-view - 显示/动画 Wavefront,.OBJ等3D对象(iOS)
-
react-native-message-bar 在屏幕底部/顶部展示通知
-
react-native-fast-image 高性能的图片组件
-
react-native-search-box 纯JS写的类似iOS SearchBar的组件
-
react-native-splash-screen A splash screen for react-native, hide when application loaded ,it works on iOS and Android.
🔥 🔥 🔥 🔥 -
rn-placeholder 🔥 空数据的站位符,很适合用来做列表占位符 +* react-native-shimmer-placeholder ★115
🔥 具有shimmer的占位UI -
react-native-paper Material design for React Native.
-
authing-rn-sdk 🔥🔥🔥🔥由 Authing 开发的,快速接入支付宝、微信等 APP 登录,以及免代码开发支持邮箱密码、用户名密码、手机验证码登录的 UI。
文本相关
- react-native-markdown 支持markdown的component
🔥
工具
- react-native-mock 一个为ReactNative提供的测试框架
🔥 🔥 - react-native-google-analytics google统计分析
🔥 - react-native-fabric 统计分析,崩溃分析等
🔥 🔥 - react-native-macos 为mac OS服务的React Native
- react-native-wechat 调用微信相关,比如分享,登录,支付
🔥 🔥 - reactotron 在终端检测React Dom和Reactive App
🔥 🔥 🔥 - react-native-windows Windows平台的RN工具
🔥 🔥 🔥 - react-native-webpack-server 用Webpack来编译React Native App
- aws-sdk-react-native AWS的官方SDK
🔥 🔥 - [react-native-ab] (https://github.com/lwansbrough/react-native-ab) A/B Test
🔥 🔥
系统相关
- react-native-device-info 获取设备信息
🔥 🔥 - react-native-barcodescanner 扫码
🔥 - react-native-contacts 访问通讯录 🔥
- react-native-fs 访问本地文件系统
🔥 🔥 - react-native-push-notification 本地和远程通知 🔥🔥
- react-native-touch-id 调用TouchID认证 🔥
- react-native-fcm - firebase cloud messaging 和 local notification
🔥 🔥 - react-native-permissions 统一管理安卓和iOS的权限
🔥 🔥 - [react-native-geocoder]((https://github.com/devfd/react-native-geocoder) 地理编码处理
🔥 🔥 - react-native-offline 🔥🔥🔥 处理网络离线/在线切换
- react-native-sensors 传感器
Web相关
- react-native-safari-view 封装iOS中的 Safari View Controller
🔥 - react-native-webview-android 封装了Android中的Webview
🔥 - react-native-webrtc A WebRTC module for React Native.
🔥 🔥
动画
- react-native-animatable 封装了很多动画,强烈推荐
🔥 🔥 🔥 🔥 - react-native-interactable 交互式动画 🔥🔥🔥🔥
- react-native-spruce React Native对Spruce的封装
数据存储
- react-native-sqlite-storage iOS/Android上的Sqlite3封装 🔥🔥
- react-native-store 封装了react-native AsyncStorage 🔥🔥
- realm-js 用JS来调用Realm 🔥🔥🔥🔥
- react-native-fetch-blob 更容易的访问文件和交换数据(本地,网络)
🔥 🔥 🔥
多媒体
- react-native-camera 相机组件
🔥 🔥 🔥 🔥 - react-native-video 视频组建
🔥 🔥 🔥 🔥 - react-native-image-crop-picker 图片选择器,支持对图片进行切割
🔥 - react-native-video-processing 视频编辑,调整,滤镜
其他
- react-native-css 用CSS的方式对Component进行Style
🔥 🔥 - react-native-extended-stylesheet 对stylesheet进行扩展 🔥🔥
中文资料
宏观介绍
- [如何评价 React Native?(知乎)] (https://www.zhihu.com/question/27852694)
- 跨平台开发时代的 (再次) 到来?( Xamarin,NativeScript 和 React Native 对比) ⭐️⭐️
- React Native概述:背景、规划和风险 ⭐️⭐️
- 使用React Native一年后的感受
⭐️ ⭐️ - React Native通信机制详解 ⭐️⭐️⭐️
- [深入ReactNative]第一篇 通讯及消息循环代码剖析
⭐️ ⭐️ ⭐️ - 旅行喵 React Native 技术实践
⭐️ ⭐️ ⭐️
技术细节
- 一个上架了的React Native项目实战总结
- react组件间通信
⭐️ ⭐️ - React Native 之 JSBridge ⭐️⭐️
- ReactNative iOS源码解析(一)
⭐️ ⭐️ ⭐️ - ReactNative iOS源码解析(二)
⭐️ ⭐️ ⭐️ - IDE(Atom+Nuclide)搭建和简单使用 ⭐️⭐️⭐️
- FlexBox入门图解
⭐️ ⭐️ - React Native开发之动画(Animations)
⭐️ ⭐️ - 写给移动开发者的 React Native 指南 ⭐️⭐️⭐️
- 在react-native中使用redux ⭐️⭐️⭐️
英文资料
- React Native: Bringing modern web techniques to mobile
⭐️ ⭐️ - React Native and WebRTC
⭐️ - Writing Android Components
⭐️ - Android Performance ⭐️⭐️
- A Dynamic Crazy Native Mobile Future Powered by Javascript
⭐️ - Build a Weather app 用RN创建一个天气应用教程 ⭐️⭐️⭐️
- Better List Views in React Native 性能更好的 ListView
JS相关
- es6features 详细介绍了ES6的新特性,RN是支持ES6的,强烈推荐 ⭐️⭐️⭐️
- React 入门实例教程 阮一峰老师的React入门文章,强烈推荐
⭐️ ⭐️ ⭐️ - React 技术栈系列教程
⭐️ ⭐️ ⭐️
技术细节
- Routing and Navigation in React Native
⭐️ ⭐️ - Unit Testing React Native with Mocha and Enzyme
⭐️ ⭐️ ⭐️ - Routing and Navigation in React Native
⭐️ ⭐️ - Unit Testing React Native with Mocha and Enzyme
⭐️ ⭐️ ⭐️ - test-driving-react-native-applications ⭐️⭐️⭐️
- react-native-tutorial-part-1-hello-react
⭐️ ⭐️ - Creating "Droppable" Components with Animated and PanResponder
⭐️ ⭐️ ⭐️ - Basics of using react-native-router-flux
- How to Use the ListView Component
⭐️ ⭐️
视频资料
Tips:部分视频资料来自Youtube,可以用Lantern翻墙
- React Conf 2018
- React Conf 2017
- React.js Conf 2016
⭐️ ⭐️ ⭐️ - React Conf 2015: Introducing React Native
⭐️ ⭐️ ⭐️ - React Conf 2015: A Deep Dive into React Native
⭐️ ⭐️ ⭐️ - F8 2015: React Native and Relay
⭐️ ⭐️ - Let's build a React Native app in 20 minutes
⭐️ - Pluralsight.com: Build iOS Apps with React Native
⭐️