南京音乐推荐联合社

React Native移动开发资料库

xiangzh 2020-04-04 15:20:24

本文整理了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应用,实时翻译摄像头中看到的信息

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]((https://github.com/start-react/native-starter-kit) React Native + NativeBase + React Navigation + Redux + CodePush (iOS & Android) 开发的App

UI

  • React-Native-Elements 一组开发RN的UI工具包(强烈推荐) ⭐️⭐️⭐️⭐️⭐️

  • react-native-calendars ⭐️⭐️⭐️⭐️ 优秀的日历控件

  • 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-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]((https://github.com/KBLNY/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-paper Material design for React Native.

文本相关

  • 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-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) 地理编码处理 ⭐️⭐️

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-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: 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创建一个天气应用教程 ⭐️⭐️⭐️

JS相关

  • es6features 详细介绍了ES6的新特性,RN是支持ES6的,强烈推荐 ⭐️⭐️⭐️

  • 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:部分视频资料来自Youtubu,可以用Lantern翻墙

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


Copyright © 南京音乐推荐联合社@2017