/awesome-react-native

React Native 学习资源精选仓库(汇聚知识,分享精华)

MIT LicenseMIT

React Native 学习资源精选仓库(汇聚知识,分享精华)

《React Native Awesome》这里fork过来的,汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。因后面无法 Pull requests 所以增加了居多资源,比如:一起踩坑音视频相机图形动画...,比原项目内容更丰富🔥。

目录

资源网站

ES6&ES7

React.js

React.js相关教程

React Native

教程

布局相关

开发调试

发布部署

系列教程

项目实践&教程

开源APP

它山之石可以攻玉。

框架

React-Native开发的库/ SDK类型。

  • NativeBase:一款融合了ES6用于在React Native上创建创建高质量的Android&iOS APP的框架。
  • tcomb-form-native:强大的表单处理控件,支持 JSON 模式,可插拔的外观和感觉。
  • BlankApp UI:React Native的高度可定制和主题组件。
  • Shoutem UI:一个完整React Native的UI工具包。
  • React Native Elements:React Native UI元素和组件的集合。
  • Panza:收集无状态,功能性,跨平台的ui组件,用于React Native。

  • react-native-launch-image:用在React Native上手动关闭iOS启动界面(Launch Screen)的工具。详细说明
  • RNShareSDK:一款基于原生平台ShareSDK的ReactNative插件,方便RN开发者集成各大社交平台的分享和授权功能。
  • react-native-social-kit:对第三方社交账号SDK的封装,使开发者能在React Native App里使用授权、分享等功能。
  • react-native-agora: 基于声网音视频SDK封装的React Native模块,方便RN开发者可以轻松集成WebRTC功能,实现电话会议,视频会议,直播等功能。

组件

UI

Navigation

ViewPager

ListView&ScrollView

Text&Rich Content

弹框

  • react-native-easy-toast:一款用于React Native上消息提示弹框组件,使用方便,支持定义Toast,支持iOS,Android。
  • react-native-modal:模态框,作者已经将该组件添加到React Native,所以开发者可以直接使用Modal;
  • react-native-popover:一款类似Android popupwindow的弹出框组件。

音视频相机

图形动画

数据存储

Web相关

系统相关

Material Design

工具包

TabLayout

工具

IDE

  • Nuclide:Nuclide 是 Facebook 推出的一套基于 Atom 的开发工具集。用于开发基于 Hack 的 Web 应用。提供自动完成和 JavaScript 类型检查,内建 React 开发支持,并支持 Facebook 最新的 React Native 库,支持 Facebook 的 Flow JavaScript 类型检查器。
  • WebStorm:JetBrains公司出品的用于前端开发的IDE,WebStorm有着JetBrains公司IDE的优良血统,是前端工程师的一个开发神器。另外,AndroidStudio也是基于JetBrains的IDE,这对于习惯了AndroidStudio的开发者来说,WebStorm无疑是一个最佳的选择。

其他

  • CodePush:CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。
  • Redux:用于JavaScript apps上的一款可预见的状态管理框架。
  • MobX:与 Redux 相比,更轻便、自由的状态管理框架。
  • redux-react-native-i18n 具有复数形式的i18n解决方案支持Redux上的React Native应用程序
  • React Sight 用于React的可视化工具,支持Fiber,Router(v4)和Redux Chrome Plug github
  • React Developer Tools 一个扩展程序,允许检查Chrome和Firefox开发人员工具中的React组件层次结构。 Chrome Plug github
  • react-native-rename : Rename react-native app with just one command

视频

新闻&讨论

一次学习,随处可写

一起踩坑

<resources>
    <string name="app_name">Your_app_name_to_display</string>
</resources>
android{
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            def outputFile = output.outputFile
            if (outputFile != null && outputFile.name.endsWith('.apk')) {
                File outputDirectory = new File(outputFile.parent);
                def fileName
		 // 你的apk打包名称
                if (variant.buildType.name == "release") {
                    fileName =  "app_v${defaultConfig.versionName}_${releaseTime()}_${variant.productFlavors[0].name}.apk"
                } else {
                    fileName = "app_v${defaultConfig.versionName}_${packageTime()}_debug.apk"
                }
                output.outputFile = new File(outputDirectory, fileName)
            }
        }
    }

}

资源下载