leomobiledeveloper / reactnativematerials

React Native的中文参考资料，包括开源库，文字/视频资料，相关工具等

ReactNativeMaterials

React Native优秀博客，以及优秀的Github库列表（很多英文资料源自于awesome-react-native）

关于开源库类

• Star 100+ 🔥
• Star 200+ 🔥🔥
• Star 500+ 🔥🔥🔥
• Star 1000+ 🔥🔥🔥🔥
• Star 2000+ 🔥🔥🔥🔥🔥

关于博客和视频类

• 值得读读 ⭐️
• 建议阅读 ⭐️⭐️
• 强烈推荐 ⭐️⭐️⭐️

目录

• 网址
• 完整开源项目
• Libraries (Star 100+)
• 中文博客
• 英文博客
• 视频资料

网址

• 源代码
• 官方文档
• 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-calendar 日历 🔥

• 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 ⭐️

reactnativematerials's Issues

自荐一些库

包括如下：

• react-native-pure-navigation-bar：一个支持自定义的纯Javascript实现的导航条，支持绝对布局、横竖屏、最新的iPhone XS/XR、安卓的Translucent等特性。
• react-native-general-listener：分层级的事件监听，支持监听子事件。
• react-native-general-storage：分层级的AsyncStorage，支持多分区存储。
• react-native-picklist：多功能的选择页面，支持单选/多选、单层/多层数据、不完全选择状态、内部搜索等功能。
• react-native-full-image-picker：拍照、从相册选择、拍摄视频功能库，支持show的方式弹出、多选等功能。

Assignment 2 Demo Register

Assignment 2 Demo Register

有人在CSDN发表此文，并标注原创

冒昧打扰！
因在别处看到此文被标为原创，不知以下链接是否为您本人发表。
CSDN
阿里云栖社区