现阶段非主流的终端虚拟化控制技术计划大体上能分成四类,两类是选用原生植物内建应用流程读取HTML5的Hybrid控制技术计划,选用此类计划的主要就有Cordova、Ionic和QQ小流程;另两类是选用JavaScript词汇展开合作开发,接着选用原生植物模块展开绘图,选用此计划的主要就有React Native、Weex和快应用领域;最后两类是选用便携式的绘图发动机和便携式的原生植物模块来同时实现虚拟化,选用此类计划的主要就是Flutter。
对于其他的应用流程计划,基本上能舍弃了,那时我们探讨终端虚拟化合作开发主要就说的是React Native和Flutter,React Native和Flutter在应用领域合作开发上,工作效率相差无几,不过要不光强调操控性不然,还是Flutter为最差优先选择。由于那时我们都开始选用Flutter来合作开发应用领域,引致React Native的自学数据资料太少。
做为虚拟化的死忠影迷,我在今年的三季度对《React Native终端合作开发实战》展开了升级换代,出版发行了《React Native终端合作开发两栖作战》的第三版,书中对以后的科学知识做了再次的剖析,使之更为切合工程项目两栖作战,有需要的能去天猫,天猫全力支持下。
做为现阶段较为盛行的终端虚拟化合作开发计划之一,React Native依然还有许多的影迷,不光是熟识前端React合作开发的控制技工,国内小厂都在选用什么样终端虚拟化架构详列了现阶段在选用虚拟化控制技术展开应用领域合作开发的一些供应商。
React Native 自学资源优选
产品目录
产品目录天然资源中文网站ES6&ES7React.jsReact.js有关讲义React Native讲义产业布局有关合作开发增容正式发布布署系列产品讲义工程项目课堂教学&讲义开放源码APP架构库模块UINavigationViewPagerListView&ScrollViewText&Rich Content弹框音频照相机绘图动画电影数据存储Web有关系统有关Material Design工具包TabLayout工具IDE其他视频新闻&探讨一次自学,随处可写一起踩坑天然资源下载
天然资源中文网站
ES6&ES7
ES6的新特性,以及ES6与ES5的区别深入浅出ES6(十三):类 ClassES6新特性:选用export和import同时实现模块化ES6令人激动的特性ES6 自学笔记React on ES6+React/React Native 的ES5 ES6写法对照表深入浅出ES6阮一峰ES6 文档JS 函数式编程指南
React.js
React官网React中文网React Router中文文档React-China社区模块的详细说明和生命周期(Component Specs and Lifecycle)
React.js有关讲义
React速学讲义(上)React速学讲义(中)React速学讲义(下)React入门讲义React入门实例讲义-阮一峰React模块间通信React数据流管理架构之 Redux 介绍
React Native
React Native 官方文档React Native 中文版 – 极客学院React Native 中文版 – reactnative.cnReact Native中文社区React Native模块库中文网站React Native模块库中文网站Use React Native 资讯站
讲义
产业布局有关
React Native产业布局详细指南React Native产业布局篇Flex 产业布局语法讲义React Native探索(二):产业布局篇构建 F8 App / React Native 合作开发指南
合作开发增容
React Native增容技巧与心得教你轻松修改React Native端口(如何同时运行多个React Native、8081端口占用问题)
正式发布布署
React-native Android环境搭建React Native应用领域布署/热更新-CodePush最新集成总结React Native正式发布APP之签名打包APKReactNative增量升级换代计划React Native: Android 的打包ReactNative之原生植物模块合作开发并正式发布——iOS篇ReactNative之原生植物模块合作开发并正式发布——android篇React Native for Android 入门老虎
系列产品讲义
React Native 自学笔记React Native高手进阶-专栏React Native高手进阶-专题React Native 每日一学(Learn a little every day)React-Native-lessonReact Native 自学笔记React Native 之 JSBridgeReactNative iOS源码解析(一)ReactNative iOS源码解析(二)自学ReactNative,全平台所需要的科学知识点React Native与IconfontReact Native Animation Book
工程项目课堂教学&讲义
React Native工程项目两栖作战视频讲义教你轻松在React Native中集成统计的功能)手把手教你构建运行React Native官方ExamplesReactNative For Android 工程项目两栖作战总结Moles:携程基于React Native的虚拟化合作开发架构构建 Facebook F8 2016 App / React Native 合作开发指南React Native 从入门到原理在react-native中选用redux深入浅出 – Redux优化 Redux 架构的 10 个技巧【译】
开放源码APP
它山之石能攻玉。
GitHubPopular:基于React Native的查看、阅读、收藏GitHub上 最受欢迎的开放源码工程项目的APP,不仅如此,它还是一款GitHub Trending的客户端。React Native官方Demo:React Native官方Demo,汇集了各种模块,API的选用Examples。Facebook F8 App :基于React Native 的2016 F8大会APP。HackerNews-React-Native:Hacker 新闻客户端。react-native-nw-react-calculator:基于React Native的计算器,iOS/Android、Web、桌面多端。react-native-dribbble-app:基于React Native的Dribbble客户端。noder-react-native:Noder-cnodejs客户端。ZhiHuDaily-React-Native:知乎日报Android版。react-native-gitfeed:一款基于React Native的GitHub客户端。FinanceReactNative:Finance – 股票报价app。React-Native-Gank:Gank.io客户端。leanote-ios-rnLeanote:Leanote for iOS(云笔记)。shopping-react-native:购物app-界面。react-native-nba-app:This is why we play。react-native-gitosc:选用React Native重写的OSChina的Git@OSC客户端。reading:iReading App。toutiao:一款基于react-native 的ios android版 资讯头条 APP。react-native-lagou:用react native写的仿拉勾ios版本demo。RN-ListViewLoadMore:ReactNative基础工程项目,包含Navigator、TabBar、以及ListView的Refresh和LoadMorereact-native-BabyHealth-:仿 “宝宝健康” app,同时实现Listview展示、收藏、跳到appstore、react-redux与redux-thunk的选用react-native接入ios/android原生植物模块 : react-native接入ios/android原生植物模块例子react-native图片上传实例 [movieapp] (https://github.com/junedomingo/movieapp) : Discover Movies and TV shows – React Native架构
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
React-Native-Elements一组合作开发RN的UI工具包(强烈推荐)APSL/react-native-button 全力支持多种点击事件的Button控件mastermoo/react-native-action-button可自定义的多动作按钮模块react-native-activity-view iOS上的分享和action sheets模块react-native-app-intro 引导页react-native-blur添加模糊或者毛玻璃效果react-native-calendar 日历react-native-collapsible 可折叠的componentReact Native Drawer 抽屉效果,可 用来同时实现侧拉菜单react-native-dropdown下拉菜单ReactNativeEffectsView 封装了iOS 8上的UIVisualEffectViews,在React Native中同时实现毛玻璃效果react-native-gesture-password 手势解锁,全力支持iOS和Androidreact-native-gifted-form 在React Native中方便的选用表格react-native-gifted-messenger 方便的同时实现聊天UIreact-native-grid-view 网格视图,类似iOS中的UICollectionViewreact-native-keyboard-spacer 适用于iOS的根据键盘自动调整输入框react-native-keyboardevents 监听键盘显示/隐藏react-native-keyboard-aware-scroll-view一个处理键盘外观的模块,自动滚动到焦点的TextInputreact-native-mapbox-gl 地图airbnb/react-native-maps针对iOS + Android的React Native Mapview模块lelandrichardson/react-native-maps 地图react-native-material-kit 一组UI Components,为了介绍 Material Designreact-native-modalbox 用于模态显示的Componentreact-native-orientation 监听设备旋转react-native-parallaxparallax效果react-native-picker 优先选择器,可用于同时实现时间优先选择,区域优先选择react-native-progress-hud ProgressHUDreact-native-controllers 封装了 原生植物的iOS 导航栏,tabbar,抽屉效果等。react-native-search-bar 封装iOS原生植物UISearchBarreact-native-spinkit一组Activity指示器react-native-splashscreen App载入视图,启动后自动隐藏react-native-vector-icons 3000+全力支持自定义的图标 react-native-invertible-scroll-view 逆向的ScrollView,从底部开始产业布局,适用于聊天等向上滑动来读取更多的情况react-native-loading-spinner-overlay读取中的提示spinner ,全力支持iOS/Androidreact-native-tabs 选项卡可用于底部标签栏以及分段视图Navigation
react-native-router-flux 一款很火的导航模块。react-native-router 路由导航模块。react-native-navbar 一款用于React Native上的可定制的导航条。react-native-tab-navigator一款兼容Android、iOS的TabBar模块。react-native-drawer-layout 抽屉模块。react-native-drawer 另一款抽屉模块。ex-navigator封装Navigator,以Route为中心的NavigatorViewPager
react-native-swiper 一款轮番滑动的模块。react-native-looped-carousel 滚动轮播模块。ListView&ScrollView
react-native-refreshable-listview 下拉刷新模块。 react-native-refresherw 下拉刷新模块。 react-native-drop-refresh 下拉刷新模块。 react-native-refresher 全力支持下拉刷新的listviewreact-native-gifted-listview 下拉刷新和上拉读取的ListViewreact-native-smart-pull-to-refresh-listview 下拉刷新模块。 react-native-pull 下拉刷新模块。 react-native-swipe-list-view 滑动删除模块。react-native-swipeout iOS样式的划动删除模块。react-native-sortable-listview 拖拽排序模块。react-native-draggablelist 拖排序模块。react-native-SortableList 拖拽排序模块。react-native-tableview 桥接了原生植物的UITableViewreact-native-sglistview 为了解决React Native中ListView的内存问题react-native-input-scroll-view 完美的TextInput ScrollViewText&Rich Content
react-native-htmlview:HTML显示模块,绘图HTML text 。弹框
react-native-easy-toast:一款用于React Native上消息提示弹框模块,选用方便,全力支持定义Toast,全力支持iOS,Android。react-native-modal:模态框,作者已经将该模块添加到React Native,所以合作开发者能直接选用Modal; react-native-popover:一款类似Android popupwindow的弹出框模块。音频照相机
react-native-barcodescannerreact-native-camera 照相机模块react-native-image-picker 能从照相机或者相册优先选择图片 react-native-video 视频组建react-native-image-crop-picker图片优先选择器,全力支持对图片展开切割绘图动画电影
react-native-button 按钮,因为react-native没有提供buttonreact-native-scrollable-tab-view滑动的tab视图react-native-animatable 封装了许多动画电影,强烈推荐react-native-lightbox 图片全屏预览react-native-looped-carousel 视图轮播react-native-svgkit 显示SVG格式图片react-native-chart 绘图(折线图,柱状图,扇形图)react-native-circular-progress 圆形的显示进度的视图gl-react-native React Native中选用OPENGL来同时实现复杂的图片和components绘图react-native-viewpager 视图轮播,全力支持循环滚动,自定义视图。已做操控性优化react-native-gallery React Native图片模块库,全力支持常见手势。lottie-react-native 基于Lactie封装的绘图After Effects动画电影数据存储
react-native-sqlite-storage iOS/Android上的Sqlite3封装react-native-store 封装了react-native AsyncStoragerealm-js用JS来调用RealmWeb有关
react-native-safari-view 封装iOS中的 Safari View Controller react-native-webview-android封装了Android中的Webviewreact-native-webrtc A WebRTC module for React Native.系统有关
react-native-device-inforeact-native-barcodescanner 扫码react-native-contacts 访问通讯录react-native-fs 访问本地文件系统react-native-push-notification 本地和远程通知react-native-touch-id 调用TouchID认证Material Design
mrn:Material Design模块库。react-native-material-design:一款用于React Native上的材料设计UI模块库。工具包
react-native-style-tachyons 为React Native提供更好的样式react-native-css 选用css样式React-Native模块react-native-mock 一个为ReactNative提供的测试架构react-native-google-analyticsgoogle统计分析react-native-fabric 统计分析,崩溃分析等react-native-wechat 调用QQ有关,比如分享,登录,支付reactotron在终端检测React Dom和Reactive Appreact-native-windows Windows平台的RN工具react-native-webpack-server 用Webpack来编译React Native AppTabLayout
react-native-scrollable-tab-view 一款用于React Native上TabLayout模块。react-native-tab-navigatorTabBar切换视图Teaset:一款React Native UI架构,提供20+纯JS模块,可与React Native已有模块无缝组合选用,专注于内容展示与操作控制。工具
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 githubReact Developer Tools一个扩展程序,允许检查Chrome和Firefox合作开发人员工具中的React模块层次结构。Chrome Plug githubreact-native-rename: Rename react-native app with just one command视频
React Native工程项目两栖作战视频React Native免费自学视频React.js Conf 2016
新闻&探讨
ReactJS 真的好吗?
一次学习,随处可写
react-native-macos:选用React Native和Cocoa组建macOS桌面应用领域。react-native-web:选用React Native组建Web应用领域。一起踩坑
解决:next release empty section headers will be rendesred. In this release you can user ‘enableEmptySections’ flag to render empty section headers.error: no devices/emulators foundreact-native run-android时出现Could not download imagepipeline.aarUndefined symbols for architecture x86_64: “std::terminate()”方法一:animated useNativeDriver is not supported because the native animated module is missing方法二:animated useNativeDriver is not supported because the native animated module is missing最终都需要将libRCTAnimation.a 文件导入react-native issues #11094error: unable to find utility “instruments”, not a developer tool or in PATHProperty force not found on object of type UITouch应用领域反应缓慢,出现卡顿: 查看是否console日志打印过度造成React Native Debugger放到最前面,应用流程窗口不要放到选项卡里面小米 – com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to establish session *.h file-not-found修改安卓app在手机上展示的名称
<resources>
<string name=”app_name”>Your_app_name_to_display</string>
</resources>
修改安卓打包时apk的名字:如 wabg.apk
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)
}
}
}
}