Geekly articles weekly

Freelancer Notes：开发第一个React Native应用程序

该材料的作者（我们发表了译文）最近发布了他的第一个用React Native编写的移动应用程序。 碰巧这个应用程序也是他作为自由程序员创建的第一个项目。 在这里，他将谈论他在工作期间必须面对的问题-从项目的初始化到在App Store和Google Play中的发布。



为什么选择自由职业者？


去年五月，我提出了一个很棒的自由职业者项目。 当时，我是斯德哥尔摩一家初创公司的全职开发人员。 这是我的第一项编程工作，一年前就到达了那里（ 在这里我将详细讨论）。

夏天快到了，工作节奏越来越快，疯狂的一天一天变得越来越平静。 有如此一周的时间，按照优先顺序，我不得不处理技术支持。 我不得不处理一些错误，我有点无聊，工作没有让我满意。

就在我心情低落的时候，父亲告诉我他打算为公司客户创建移动应用程序的打算。 尽管他知道我非常忙于工作，并且没想到我会花所有时间来实现他的想法，但他仍然询问我是否想成为这个新项目的顾问。 然后，我感到自己渴望进行有趣的脑力劳动，因此积极地回答了他的问题。 尽管我最初没有计划，但最终我从顾问I变成了领先的应用程序开发人员。

在这里，您可能想知道为什么在没有作为专业Web开发人员一年后，甚至有人会尝试进行移动开发？ 继续在选定的细分市场中积累经验，专业发展并创造令人印象深刻的简历是否明智？

我完全同意这会更加合理。 但是我是一个绝望的“多工位工人”，几年前他决定不是根据某种策略而是根据自己的喜好来做出职业决定。 我决定做些带给我快乐的事情。 换句话说，我的履历现在看起来几乎无法进入更加不稳定的状态。

当然，做自己喜欢的事情和遵循职业策略不一定是相互排斥的现象。 实际上，我真的很喜欢以前的工作和老板。 碰巧的是，我遇到了另一个项目，事实证明，对这个项目的渴望比对做我以前所做的渴望更强烈。

是什么使这个项目对我如此有吸引力？ 是什么让他比开发一个由我结识的最优秀的人组成的团队的数千个公司使用的快速开发产品更有趣？ 可以这样回答这个问题：这就是自由，这是给我带来解决一个难题的需要的挑战，这是对自我发展的渴望。

为什么决定使用React Native？


当我加入该项目时，我的客户已经收到了当地数字代理商的几份报价。 甚至在我考虑独立开发应用程序的可能性之前，我就以友好的方式被要求评估这些建议。 当我看着它们时，我对它们的低质量感到惊讶。

其中一家代理商发出了该应用程序设计的概述，该框架除了看上去很笨拙外，还与客户网站上反映的企业标识不符。 另一个建议的天价-用于发展和项目支持。 似乎第三者在没有真正研究客户需求的情况下发送了提案。 所有提交提案的机构都有一个共同点：他们将使用Cordova混合框架创建一个应用程序。

但这还不是全部。 尽管Cordova是一个完全免费的开源工具，但其中的一家机构甚至试图隐藏有关其使用的特定技术的信息。 相反，代理商代表谈到了内部创建的“内部”移动应用开发平台。 看来，我们在谈论的是Cordova上的一个小附加组件，其目的只是为了牢固保证该机构为服务于应用程序的专有权，并使将来可能的客户过渡到另一位开发人员既困难又昂贵。 总体而言，所涉及的提案并不是特别令人印象深刻。

应当指出，我对混合框架一无所知。 我经常使用基于它们的应用程序。 例如，Gmail，Slack，Atom，Figma。 但是，那时我已经听说过React Native一段时间了，关于这个库如何允许您使用非混合JavaScript创建跨平台的移动应用程序！

现在呢？ 开发本机JavaScript应用程序时是否有必要以某种棘手的方式支持iOS和Android？ 之所以出现这个问题，是因为当我对此类应用程序感兴趣时，事实证明，iOS应用程序是使用Objective-C或Swift编写的，而Java或Kotlin是用于开发Android应用程序的。

当然，这里没有特殊的技巧。 所以我还有一个问题。 React Native应用程序如何被称为真正的本机应用程序？ 简而言之，如果您回答这个问题，那么整个过程就在API中。 我花了更多的时间来理解这一点，而不是我想承认的，但是React Native应用程序（称为native）与移动平台一起使用的方式并不在于启动JavaScript代码或在Windows中编译此类代码。本机代码。 问题是这些应用程序执行API请求，这些请求使用iPhone上的Objective-C和Android上的Java来显示本机组件。

如果您想对React Native的基础有更深入的了解-我向Quora推荐此答案， 这是 React Conf 的演示文稿，以及该材料，介绍了React Native的发布。

尽管那时我还不知道React Native应用程序的肠子到底发生了什么，但是我知道这类应用程序的工作减少到了执行本机代码。 这是我反对选择代理商提供的基于Cordova的解决方案之一的主要论点。 我认为，如果公司需要移动应用程序，则该应用程序应为本地应用程序。 如果某人需要基于HTML / CSS / JS构建的应用程序，那么花一些钱只是为了改善其Web应用程序的移动功能会更好。

当我与客户分享此推理时，他问我一个问题，即我是否认识可以创建此类应用程序的人。 我回答说我不知道​​。 然后他们问我是否可以自己做。 “我不能。”我回答。 但是，到那时，我已经对所有这些内容都感兴趣了，并且以应用程序的规范作为我的实验基础，简直无济于事地试用React Native。

在我自己意识到这一点之前，我已经能够创建该应用程序的基础。 结果，在那次交谈之后的几周内，客户和我同意我将为他开发应用程序。

应用规格


在深入探讨技术细节之前，我想先谈谈我们正在处理哪种应用程序。

为其开发应用程序的客户是位于斯德哥尔摩的一家公司，从事联合办公，集体办公室的管理。 换句话说，我们谈论的是可以由多家公司租用的办公空间。 目前，我的客户有大约10个这样的现有办事处，其中约有400家公司和1400名员工在租用办公空间。 这些是办公室的租户，是应用程序的目标受众。


游憩区之一

与项目经理讨论了将来的应用程序后，我设法找到了该项目的一些要求：

  • 能够登录，注销和重置密码。 请注意，所有用户帐户均由管理员创建，并且该应用程序不支持在系统中注册。 因此，如果您决定下载此应用程序，则将无法使用它。
  • 查看和编辑用户个人资料：名称，电子邮件地址，密码，头像。
  • 支持推送通知。
  • 主页部分，用户可以通过该部分了解整个公司的新闻，尤其是与公司租用的联合办公有关的新闻。
  • 社区部分，用户可以使用该部分查看有关各种协作的信息，与他们的经理联系，并查看从事某种协作的公司。
  • 会议部分，您可以在其中预订会议室和管理预订。
  • 部分选择，用户可以在其中找到独家折扣和优惠。
  • 首先，您需要创建一个iOS版本，然后添加Android支持。
  • 管理员的基于Web的应用程序，它允许您管理React Native应用程序中显示的信息。 尽管在这里我将主要讨论前端开发，但是我认为应该适当提及管理员应用程序的服务器部分基于Ruby on Rails，Postgres和Heroku。

您可能会注意到，该项目的要求不高。 也许，这种精神可以称为某人将要使用新技术开发的第一个应用程序的一个很好的例子。 如果您有兴趣看一下我的研究成果（并通过决定是否花时间阅读有关所有这些事情是如何发生的故事），那么这里是该应用程序第一版的概述。


应用程序的第一个版本

还在读书吗？ 太好了，那就继续吧。

向最好的学习


想象一下，您答应过您的朋友为他们盖房子。 但是你不知道该怎么做。 您甚至都不知道从哪里开始。 在这种情况下应该首先做什么？ 答案是显而易见的：找到可以建造房屋并向他学习的人。

严格来说，这正是我试图做的。 我很幸运能够找到您真正需要的东西。 因此，在搜索React Native培训材料仅几个小时之后，我在YouTube上找到了由13部分组成的哈佛React Native 视频课程 。 每次讲座持续90-120分钟，专门针对一个单独的主题。 结果，我面对了大约23个小时的高质量培训材料。

找到了这门课后，我立刻像痴迷的人一样着手学习。 结果，经过几个星期可以在晚上和周末度过的课程，我完成了本课程，并为该应用程序奠定了良好的基础。

现在我可以说，毫无疑问，这门课程是我设法找到的最好的课程。 当然，简洁而精心准备的课堂在学校中发挥了巨大的积极作用，但我不得不指出老师的技能。 我将用以下词语描述主持这些课程的方式：速度，极端实用性，专注力。 没有水，没有无关紧要的笑话或生活故事。 不像你谦卑的仆人在这里写的...

一种或另一种感觉是，每堂课都包含了太多有用的信息，以至于花很多时间将其介绍给其他许多老师。 换句话说，这门课程与著名的哈佛大学CS50非常相似。

因此，如果您想为第一个React Native应用程序找到立足点，我绝对会为您推荐此课程。 尽管在这里应该注意一个功能。 该课程使用世博工具包。 这是一个非常出色的工具，适用于大多数简单的应用程序，在使用移动平台方面，它具有各种各样的微妙之处。 但是，如果您像我一样，希望创建一个项目的基础，以便尽快将其变成一个相当大而复杂的应用程序，并且同时又需要完全的操作自由度，则最好通过以下方式初始化该项目：反应本机。

我可以使用的第二个“培训资源”是我的同事。 幸运的是，我当时所在的公司也开始开发React Native项目。 尽管我本人并未参与该项目，但我只是与从事该项目的人员交谈并分析其代码而学到了很多。

现在，我们已经讨论了开发React Native应用程序所涉及的所有内容，是时候着手解决技术问题了。

开发环境


在使用形式为react-native init MyApp的团队之后，我创建了应用程序的基础，而面对我的首要任务之一是开发新的开发环境。

如果您是从通常的Web开发中来到React Native环境的，那么应该注意，这里看起来您似乎很熟悉。 对我来说，这意味着我继续使用Atom作为代码编辑器，使用iTerm作为终端，并使用Gi​​tUp作为使用git的界面。 （如果Vim爱好者现在正在阅读此书，我建议每个人都不要相信。）但是，除了上述工具之外，我还需要其他一些东西来开发React Native应用程序。

例如，我需要习惯iOS模拟器。 尽管通过命令行工具执行react-native run-ios命令看似简单，但在此命令的简单调用刚开始时就不足以使仿真器正常工作。 由于新的npm软件包几乎每天都添加到项目中（后来又添加了许多本地CocoaPod模块），我被迫熟悉清除清理Watchman资源和Haste缓存，删除node_modules文件夹，重新安装模块并重置Metro Bundler缓存。 幸运的是，可以使用以下命令解决所有这些任务：

 watchman watch-del-all && rm -rf tmp/haste-map-react-native-packager && rm -rf node_modules && yarn && npm start --reset-cache

在十分之九的情况下，这种“手鼓舞”使仿真器恢复了生命。 但是，有时候，这还不够。 然后，我必须深入研究GitHub上错误消息的描述，并阅读有关StackOverflow的讨论。

其他一些问题的根源是，很长一段时间以来，我认为为了解决某些问题，必须运行Xcode。 并相信我，您将努力在尽可能短的时间内呆在这个恐怖的房屋IDE中。

类似的故事发生在带有特定版本的iPhone的模拟器上。 如果有人早些时候告诉我，下面的命令可以直接从命令行解决此问题，那么我在React开发的头几个月可能会轻松一些。

 react-native run-ios --simulator='iPhone X'

适应新开发环境困难的其他示例包括准备应用程序发行版本的三步过程 （用于放置在App Store或某些持续集成环境中，例如Visual Studio App Center或Firebase）以及从发行版本过渡到版本的过程，用于调试（开发模式）。 也许许多人会发现可以使用任何文本编辑器对项目进行必要的更改，这很明显。 无论如何，这只是一些小事情的示例，这些小事情在开发模式下工作时会对我的工作流程产生意想不到的巨大影响。

最后，花了一些时间来适应不断切换各种macOS应用程序的需要，以解决我在开发Web应用程序时通常仅使用Chrome即可解决的任务。

为了观察JavaScript代码正在写入控制台并分析HTML / CSS输出（出于调试目的），我转向了React Native Debugger 。 为了监视应用程序的状态，提交的操作，API请求和收到的响应，我使用了Reactotron 。 尽管我发现这两个应用程序都非常有用，但是当我可以在运行我的应用程序的同一环境中（使用插件）解决所有这些任务时，我不禁想到了我用于创建Ember.js应用程序的常规工作流程。 Chrome的Ember Inspector）。

导览


对于React Native，组织导航/路由似乎是一项非常困难的任务。 在这个框架存在的过程中，出现了许多解决这个问题的方法，但是仍然有一些东西可以被称为普遍认可的标准。 我决定使用react-navigation库，我的选择主要受到以下事实的影响：他们在我经历的React Native课程中谈论了这个库，以及我的同事使用了它。

如果我花一些时间对这个问题进行足够深入的研究，则可以发现以下内容：

  • react-navigation项目在GitHub上大约有15,000个星，并且有86个未解决的问题。 它完全基于JavaScript，并具有我所见过的导航解决方案中最详细的文档。
  • react-native-navigation库获得了约10,000个星，结果发现有162个未解决的问题。 但是，它不仅使用JavaScript。 要使用它，您需要编辑本机文件。
  • react-router存储库拥有大约35,000个星，并在GitHub上列出了55个未解决的问题。 没错，这些指标不能直接与此处描述的其他项目进行比较，因为该存储库不仅包含为React Native设计的软件包，而且还为React设计了软件包。
  • 本机导航项目大约有3,000颗星和55个未解决的问题。 那些打算学习和使用它的人应该考虑它仍然处于测试阶段，它不仅使用JavaScript，而且它得到了Airbnb的支持（该公司决定放弃 React Native。 ）

但是，即使考虑到上述情况，我还是会选择反应导航，因为我没有时间尝试所有这些库，例如，如本报告的作者那样。 最后，正如本报告中所述，组织导航的工具的选择是一个问题，其解决方案不取决于哪种工具可以称为最佳工具，而取决于哪种工具最适合特定项目的需求。

在使用反应导航大约9个月之后，我不得不说我真的没有什么可抱怨的。 如果将此库与Ember.js中使用的熟悉的router.js库进行比较 ，我可以说这是全新的东西。

对我来说，使用反应导航导航工具的三种主要类型真的很容易。 它们是StackNavigator ， TabNavigator和DrawerNavigator 。 很难理解如何组合这些工具以创建我需要的应用程序导航系统。

例如，对我来说， DrawerNavigator组件应该是导航系统的根元素（在主TabNavigation组件之上的一个步骤）这一事实是完全不明显的。 如果难以想象，这就是DrawerNavigator的实际效果（在实际的应用程序中，一切工作都更加流畅）。


实际操作中的DrawerNavigator

如您所见，在任何应用程序屏幕上，我都需要通过滑动来打开侧面导航栏。

与位于应用程序底部的主导航栏相比，我认为侧栏是次要的。 因此，在我看来，应该将DrawerNavigator放在主BottomTabNavigator下的路由树中（如下所示），或与此元素位于同一级别。

但是，在经历了很多苦难之后，试图将边栏强行插入原来不合适的地方，我意识到，根据反应导航的功能，应该将DrawerNavigator放置在BottomTabNavigator上方BottomTabNavigator ，即导航树的根。 我希望我的发现能帮助本材料的读者之一节省时间，否则这些时间将花费在阅读GitHub上的文档和材料上。

这是应用程序导航树的外观。 在这里，使用MainDraverNavigation作为根元素。


应用程序第一个版本的最终导航树

在这里，您可能想知道为什么在“社区”和“会议”部分中同时需要StackNavigator和TabNavigator 。 您不能只放下StackNavigator图层并直接进入TabNavigator吗？

问题是，我需要两个TabNavigator元素中的每一个都具有标题。 他们在这里。


TabNavigator，标题

同样，在这里，我的猜测与反应导航设备不匹配。 我认为MaterialTopTabNavigator应该是一个完全普通的导航组件，因此我决定在其设置中应该有一些内置选项，可以用来设置标题。 事实证明，那里什么都没有，这就是为什么我被迫使用StackNavigator作为中间层，结果为应用程序基础结构增加了额外的复杂性，并受到相当“美容”的考虑。

此外，这种缺乏反应导航的方式给我带来了更为严重的麻烦。 特别是，它们的需要在于，在用户滚动查看由FlatList组织的元素列表时，需要组织标题图像的折叠和消失。 由于“主页”和“选择”部分的标题与其元素的列表显示在同一StackNavigator中，因此仅通过使标题与列表的其余部分一起滚动即可解决此问题。

但是对于“社区”和“会议”部分，我找不到一种应用相同解决方案的方法，因为标题是使用StackNavigator元素显示的，而列表是使用StackNavigator元素显示的，这比导航树高了一步。 结果，我拒绝滚动标题，这在应用程序中引入了令人不愉快的异构性。


在TabNavigator和StackNavigator中滚动

尽管在模拟Iphone X的仿真器中标题所描述的问题似乎并不严重，但在小屏幕上，标题可能会占据约20％的可用屏幕空间。 如果有人知道如何解决此问题，请告诉我。

在“目标”部分中也感受到了TabNavigator的相同问题。 如下图所示，在右侧，我想在Coworking Spaces选项卡上放置另一个TabNavigator元素，以显示前三个选项卡Info，Members和Contact。

使用TabNavigator很难在不使决策复杂化的情况下将幻灯片放到元素的顶部，并且不会引起很多导航问题（主要与导航选项有关）。 因此，为了使用这三个选项卡，我不得不求助于一个称为react-native-swiper的JS软件包。 应该注意的是，如果该解决方案的应用不会导致突然出现强调制表符标题的线条动画，那么该解决方案将完全适合我。 无论如何，我认为这个劣势是避免使用替代导航系统出现问题的机会的合理回报。


将react-navigation中的TabNavigator与react-native-swiper进行比较（请注意，选项卡名称下方金线动画的区别）

以下是我在实现应用程序导航子系统后所得出的结论：

  • 在React Native应用程序中，有许多记录良好的解决方案可用于组织导航，其中我选择了react-navigation。 最适合我的需求。
  • 如果开发人员不太了解移动平台的导航系统如何工作，那么“反应导航”库将大大简化项目的工作。
  • react-navigation库具有一些不直观的功能（至少对于Web开发人员而言），但是没有什么可以绕开的，尽管不是最有效的方式。

开机画面


通过在使用react-native init命令创建的仿真器中启动新应用程序，并在react-native init进行更改时不断地重新加载它，您很快就会意识到该应用程序需要一个漂亮的启动屏幕（也称为“启动屏幕”）。

如何制作启动画面在这里写得很好，所以我不再重复本材料作者的话。 我只会谈论我遇到的问题，并且本指南中没有任何问题。 这是这个问题的样子：


启动画面有问题

此问题在iOS上很少见，但该应用程序的某些用户可能会遇到。 当我在一个无法使用WiFi并通过电话将笔记本电脑连接到4G Internet的地方工作时，我首先发现了此问题。 iPhone用户知道，当电话分发Internet时，其状态栏会变为蓝色并变高。 当我在手机上启动应用程序时，这“破坏”了我的启动屏幕上的图像。 打电话时出现了同样的问题。

结果，在React -native-splash-screen存储库中翻阅了一段时间，没有找到任何有用的东西之后，我决定通过在显示初始屏幕时完全隐藏状态栏来解决此问题。

这非常简单-只需将UIStatusBarHidden键添加到UIStatusBarHidden ，为其分配逻辑值true ，然后在调用SplashScreen.hide() ，将React Native StatusBar组件的hidden属性设置为StatusBar 。

国家管理


我感到在过去的两年中，我每天都在听到关于协议优先于配置的优先权，即约定优先于配置的原则（CoC）。 所以这是我以前的工作。 这并不奇怪，因为在服务器上，我们使用了Ruby on Rails，在客户端上使用了Ember.js，这两个框架的本质都尽可能地与CoC原理相匹配。 我以为我知道这意味着什么，但是在React Native中探索状态管理的过程使我对该原则有了全新的理解。

尽管我在几个非常简单的应用程序中尝试了受此原理影响的React库，但我从未基于该库创建足够大的东西，这使我无法体会到使用状态容器（如Redux或MobX）的优点 。 我管理JS应用程序状态的大部分经验是使用Ember Data （这是Ember内置系统，用于管理状态和组织持久性数据存储）。

因为Redux库对我来说似乎是解决我多年来已经听说过的状态管理问题的最佳解决方案之一（并且我在我所介绍的React Native课程中对此进行了讨论），所以总的来说，我并不看重它的竞争对手。 我只是想为我的应用程序配备最好的现有状态管理系统，而无需花费太多精力。

在Ember中，90％的数据基础结构已由程序员准备使用。 我并不怀疑在我当前的项目中一切都会完全相反。 事实证明，不仅React，而且最受欢迎的状态管理库Redux都没有提供任何有用的维护全局状态的功能。 该库非常轻巧，以至于程序员必须承担90％的关于在应用程序内部处理数据的担忧，以创建一个体面的状态管理系统。

在我（一个比现在经验不足的开发人员）发现后，对我来说最困难的事情是适应新的功能和抗扰性原则。 在我完成了从简单地从服务器下载数据或将数据发送到服务器所需的大量工作之后，所有这些工作以7个相当简单的步骤的形式汇集在一起​​：

  1. 使用常量将三个常量添加到文件中： SOME_ACTION_REQUEST ， SOME_ACTION_FAILED ， SOME_ACTION_SUCCEEDED 。
  2. 将动作创建者添加到动作文件。
  3. 在合适的Reducer中处理三个动作，如有必要，向系统添加新的Reducer，并将其包括在根Reducer中。
  4. 将工人添加到适当的传奇中，如有必要，向系统中添加一个新的传奇，并将其包含在根传奇中（我使用redux-saga库来处理异步操作）。
  5. 添加一个函数来处理任何可能的API请求。
  6. 将必要的数据从状态映射到相应React组件中的属性。
  7. 从相应的React组件提交SOME_ACTION_REQUEST操作。

Redux和redux-saga当然具有更广泛的功能，但是考虑到我当前感兴趣的是，上述7个步骤是Redux对我而言的。

届会


因此，我们为React Native应用程序设置了开发环境，创建了导航树，准备了状态管理基础架构。 在该项目的下一步中将做什么？ 对我来说，创建用户身份验证系统是对这个问题的完全自然答案。 现在，我们将讨论会话。

如果您是通过Web开发进入React Native领域的，那么您将毫无困难地处理会话。 如果您甚至不熟悉LocalStorage存储所基于的概念，那么您只需要知道在使用React Native时，应使用对AsyncStorage的调用来替换对此类存储的访问。 这是抽象级别，允许您在会话之间以键值格式存储数据。 换句话说，在这里您可以存储在服务器上生成的身份验证令牌，该身份验证令牌在用户成功登录系统后传输到客户端。

清单


如果我们谈论使用列表，我感到在React Native中这个问题已经很好地解决了。 通常，可以注意到，显影剂具有三种可能性。 如果它与静态列表一起使用，则其中显示的数据不会发生变化，那么ScrollView很可能会拥有足够的数据。 , , , , FlatList . , , , , SectionList .

, , FlatList . , , , , , . .

▍


FlatList , refreshControl . , , , , . , React Native , . — RefreshControl . , .


RefreshControl

, , , refreshControl , RefreshControl , , . , , :

  • , , . , handleRefresh() .
  • , , « » ( ).

— .

, , , , . , , , GitHub.

, refreshControl onEndReached ( ) fetching . , - , false true , — , , 250 , RefreshControl , .

, setTimeout() fetching 350 . . , , setTimeout — , , handleRefresh() handleLoadMore() — refreshing loadingMore . , , , , - .

, onRefresh refreshing refreshControl . , refreshControl , , , , .

▍


, . — , , Load More , , , , .


FlatList. , , 2, onEndReached , 2-

, onEndReached . .

onEndReachedThreshold , FlatList , , onEndReached . .

100 , , 10 , 1, onEndReachedThreshold , , onEndReached , , 90-. 2, , 2- , — 80- , .

, , , , FlatList . , , , , handleLoadMore() , onEndReached , , — 10 .

, , loadingMore , , handleLoadMore() , , , !loadingMore . , , .

▍


ListLoadingComponent FlatList , , ListHeaderComponent , ListEmptyComponent ListFooterComponent , , - , , , .

, render() .

▍


, , , . , , .

, scrollToOffset FlatList , , . , . ref FlatList :

 <FlatList ref={(ref) => { this.newsListRef = ref; }} ... />

, . ScrollToOffset handleScrollToTop() , , , react-navigation, , :

 componentDidMount() { this.props.navigation.setParams({   scrollToTop: this.handleScrollToTop, }); } handleScrollToTop = () => { this.newsListRef.ScrollToOffset({   x: 0, y: 0, animated: true, }); };

, react-navigation 3 ref , BottomTabNavigator .


, , . , , 4G- ( , , 3G), , , , , .

, , , , , , , . . , , , , .

, , . 7 , image , , ( , ).

▍


, , . react-native-image-picker , Cloudinary Carrierwawe Rails-.

, Node-API Cloudinary react-native-fetch-blob . , , , , , .

, , react-native-fetch-blob, . , react-native-fetch-blob , API JS FormData . , react-native-fetch-blob rn-fetch-blob , .

▍


, React Native Image style , source resizeMode . , , - , , , .

, , , . , , , . . Avatar react-native-elements.

, Image . , - , .

, , . .


react-native-slideshow

react-native-slideshow , , . , , , , , , .

▍


7 , , . , — , , . , - . .

, , -, , , , - ( — ), , , , Facebook . , .

, , React Native-. , . — react-native-loading-placeholder , , , . — react-native-linear-gradient , . , , , , , , , , .


react-native-loading-placeholder react-native-linear-gradient

▍


— . , React Native Image . , - CachedImage react-native-cached-image .

npm- Image , , , CachedImage . Reactotron , , .

, , , . , , Cloudinary, 95% , , 4%. .

, . CachedImage activityIndicatorProps={{ animating: false }} , .


▍


React Native - Picker . - , ( - ), JS-, . , react-native-picker-select , <select> iOS Android .

JS-, React Native- ( lodash , ), , , , . , , - . , .

▍


react-native-calendars Wix. :

  • iOS , . , , , -, — .
  • React Native — DatePickerIOS DatePickerAndroid , , .
  • , , , Apple Google.

, . , , — .


react-native-calendars react-native-picker-select

▍


— , .
SaaS-, . SOAP, API Conference. , , , , .

, , , 5 . - , JavaScript Date UTC, , . , , , , , - . « », — .

, , moment-js , React Native, timezone , :

 const timeSthlmAfterFive = moment().isAfter(moment.tz('17:00:00', 'HH:mm:ss', 'Europe/Stockholm'), 'second');


, , , . React Native -, , , , , , font-face CSS.

. , . , 10 -. react-native-vector-icons .

, ,


CI/CD, DevOps- -, .

( ) , - . , . GitHub- . , :

  • . , , .
  • , - , , .

. , , , , , , push-. , , , , .

Visual Studio App Center (VSAC). Chain React 2017 . , , , DevOps-, . , , , , push-, Codepush . -. , , , , iOS, Android. , - , , , , , - .


Visual Studio App Center ( )

« », — , . , (API — ). , , , , -, (, , ).

? Microsoft, , VSAC « ». , , Codepush ( React Native-) HockeyApp ( ), - . , «developers, developers, developers, developers» .

, VSAC , - Fastlane , BuddyBuild Firebase ? , , , VSAC , , , . , , ? , VSAC, , .

VSAC. , , , .

, , , VSAC Apple Developers (Apple, , , ). , , , .

, VSAC, , , CI/CD- .

Android


, iOS- , Android . Android Studio Android React Native Platform . , Platform.select() . - , , , Platform.OS .

, , Google Play , App Store. 怎么了 , App Store Apple.

Apple


, -, React Native, . , Apple. , , , , , .


Apple

, — « ». -, , iOS-, , , , .

— Apple. , , , . Dun & Bradstreet, Apple, . , , , Apple (, , Apple , — ).

, Apple , , — , -. . , — ?

, .

, , Apple Developer . .

. . provisioning-, iOS-, , Apple .p12 push-, dSym-. , , , .

Apple, 50% 24 , 90% — 48 . , , — , , Apple-.

, . «Metadata Rejected». , - . , 5 ( App Store Review Guidelines ), .

, , , — . , , , , , . , — , () .

iOS, . , , , . , , . . , , .

总结


, React Native- . React Native-. -. , : . .

, , , , . , , — , .

, - , . . , , , 8 . . .

, . , , - .

, , , 6-7 , . , , , :

  • , (iOS Android), , , .
  • JavaScript. , , Ember.js.
  • React.js, , React-, . , JS-/.
  • , Redux.
  • DevOps .
  • , .
  • UI/UX.
  • , , , , , , , , .

JS- , Flutter , NativeScript , Objective-C, Swift, Java Kotlin, React Native .

, -, , React Native , , , . , React Native — , . React Native .

亲爱的读者们！ ?

Source: https://habr.com/ru/post/zh-CN447574/

More articles:


All Articles