Tag: react native

颤振–我的想法和印象–第一部分

我是一位具有4年专业经验的iOS开发人员，不久前，我感觉自己想尝试一些新东西……决定尝试Flutter。 我将撰写一系列故事，描述我使用Google的新SDK的经历。 尽管我可能会在此处发布一些代码示例和/或发布有用文章的链接，但我很可能不会包含任何教程（如果最终喜欢该框架，可能会写一些教程故事，并且会有足够的关注者）。 ，教程等。因此，即使您对我的故事不感兴趣，您也可能会发现一些有趣的东西。 Flutter是Google的移动应用SDK，可在创纪录的时间内在iOS和Android上制作高质量的本机界面。 Flutter可与现有代码配合使用，为世界各地的开发人员和组织所使用，并且是免费的开放源代码。 几个月前，我已经尝试过React Native，但是由于我没有足够的空闲时间（工作时间），最终放弃了，也没有关于使用该框架编写应用程序的想法。 我花了不到5个小时来试用React Native。 这次有点不同（虽然不是总是这样开始吗？哈哈😅）。 我将写一个饮水跟踪器💦。 我知道已经有很多（满是广告but），但是学习新语言和SDK的基础就足够简单了，不会花费太多时间来完成，而且我还不想（还）花费太多时间以防万一我忙于其他事情。 无论如何，不​​要专注于应用程序的主题，在大多数情况下都没有关系。 最后，我可能会共享应用程序和/或代码，但稍后会决定。 所以…让我们开始吧！ 😎 很明显，我已经在MacOS上进行了设置，现在我跳过了配置Android环境的工作……一旦我编写了应用程序的某些部分（大概是下次），就可以这样做。 我希望它会比上次安装Android Studio和所有依赖项更加流畅，这与Xcode相比确实很痛苦（为什么默认不安装某些（最新的？）SDK和模拟器？）。 下载了v0.5.1-beta，并按照您在Flutter官方页面上找到的说明进行操作。 为iOS开发设置一切非常简单，因为我已经安装了大多数东西，但实际上“颤抖的医生”实际上可能会要求我自动为我安装所需的一切……我知道我很懒，但我想我只是被宠坏了（有点） Xcode的帮助，我只需安装一个工具就可以立即开始开发。 与PATH变量相同，但是谁知道，也许一旦它超出beta，Flutter的环境配置将自动进行？ 这样做很无聊，特别是因为我必须在短时间内做两次-一次在工作中一次在家里（或者也许我不需要这些事情，而自己写一个简单的bash脚本？）。 我已经安装了VS Code，所以只添加了Dart和Flutter的扩展名，因此所有内容（Android Studio及其依赖项除外）的安装时间都不会超过15分钟……还不错（👍🏼）（伙计们）建议用作IDE（Android Studio或Visual Studio Code），在使用Flutter / Dart时最喜欢什么？ 是时候创建一个新项目了！ 我已经在GitLab上添加了一个新的存储库（在这里保存了我的私有存储库），并通过VS Code命令托盘创建了一个新项目，非常简单。 该示例应用程序也从模拟器上启动，没有任何问题，可以尝试在Xcode中打开设备打开的项目并配置证书并在那里进行配置（有没有在不运行Xcode的情况下更快的方法？）。 如果我可以将它与React Native进行比较，那就更好了。 我在那里运行示例项目时遇到了一些问题，到目前为止，Flutter都没有问题（我并不是说React Native不好，我只是对它有不好的第一印象🙁另一方面，我将来可能会再尝试一次） 。 在Flutter.io入门指南中，有一个用于编写第一个应用程序的快速教程……先阅读几段内容，然后放弃🙈（让我们更艰难！那样会很无聊，不是吗？）。 我不知道为什么大多数“第一个应用程序”指南通常都显示根本没有任何架构模式的代码示例😬作为“ 不是新手程序员 ”，我想开始学习一些更好的示例并学习良好的实践（对于Flutter ）从一开始就开始…然后开始谷歌搜索。 在介质上找到有关项目结构的文章[此处，谢谢Harkirat Saluja]，并决定在我的项目中使用该结构。 如果您还有Flutter / Dart良好项目结构的其他示例，请告诉我，我很乐意将它们进行比较❤ “ 到目前为止一切都很好 ” […]

构建HackerJobs — React Native日记（11月4日）

是的，我仍在努力。 我没有很多时间来处理它，因为我今天还有其他事情要做，但有几件事。 NavigatorIOS模式 首先，我决定使用NavigatorIOS组件将其他两个视图组件（书签和设置）包装在HackerJobs中。 我这样做是因为大多数人（包括我自己）都习惯于在屏幕顶部看到标题栏。 现在，我没有更多可用于导航器的屏幕，所以这只是出于美学目的，但确实为我提供了将来迭代的空间。 这是一个小的更改，花费了几分钟。 这是用于SettingsView组件的。 <TabBarIOS.Item systemIcon =’更多’ onPress = {（）=> this.setState（{selectedTab：“ Settings”}）} selected = {this.state [‘selectedTab’] ==“设置”}> <NavigatorIOS initialRoute = {{ 组件：SettingsView， 标题：“设置” }} 样式= {{flex：1}} /> 不知道为什么格式化在该代码块上全都搞乱了，但是您去了。 页面末尾刷新 滚动到结束刷新功能不起作用的原因是，我没有使用从API返回的新故事正确地更新setState函数。 通过setState函数之前的简单concat修复了此问题。 另外，刷新的延迟很慢，因此我要么需要提早设置阈值，要么需要添加某种“ Wait for it…”视觉组件，以便人们知道它正在工作而不仅仅是冻结。 即使在功能测试期间，我也认为它已损坏。 设定检视 我对所有应用程序以及整个人生的最终目标是想出一种激活暗模式的方法。 现在我不太确定该怎么做。 恐怕这将要求我以“暗模式”样式重新设置所有应用的外观，从而导致它们翻转。 听起来令人讨厌。 但是，在我决定找出最佳解决方案之前，我在“设置”页面中找到了它。 当我弄清楚如何正确进行设置时，我想做“随机播放作业”。 现在，所有从API发出的儿童ID似乎都处于相同的顺序。 使用Lodash Shuffle功能，我可以在整个过程中增加一些随机性。 我能够实现的一件事是“重置作业”和“重置所有”按钮。 这是一个相对简单的更改，需要我在AsyncStorage中调用一些API。 AsyncStorage.removeItem（’@ savedJobs’，（）=> AlertIOS.alert（“带书签的作业已删除”））} […]

在应用程序购买中出现波动

我之前已经实现了react-native-iap模块，也有人要求在flutter构建一个模块，因为目前那里的插件不支持subscription等足够的功能。 所以今天，我实现了flutter_inapp_purchase模块。 已准备好响应本机应用程序内购买和Flutter应用程序内购买。 在itunesconnect中为ios设置应用程序内产品。 您需要完成协议，税收和银行业务。 在功能标签中添加应用内购买 。 检查产品的状态是否为“ 准备提交” 。 3.检查您的xcode设置并启用应用内购买 。 现在，您已完成ios端配置。 所以让我们去安卓。 在Playstore中为Android设置应用内购买。 如上面的屏幕截图所述，您需要先创建具有结算权限的APK，然后再设置商家帐户，然后才能创建应用内商品。 完成后，您可以创建被管理产品，如下面的屏幕截图所示。 而已。 现在，您可以转到自己的本地项目，并按照自述文件中的说明包含我们的模块。 集成flutter_inapp_purchase的摘要。 安装依赖 –依存关系： flutter_inapp_purchase：^ 0.3.3 –颤振包得到 导入并使用它。 – https://pub.dartlang.org/packages/flutter_inapp_purchase#-readme-tab- 如有任何问题，请写下问题。 谢谢。 Flutter Pub是一个中等规模的出版物，旨在为您带来有关该伟大技术的最新，令人惊叹的资源，例如文章，视频，代码，播客等，以教您如何使用它构建漂亮的应用程序。 您可以在Facebook，Twitter和Medium上找到我们，或者在此处了解有关我们的更多信息。 我们很想联系！ 如果您是有兴趣为我们写作的作家，那么可以按照这些指南进行操作。

使用Flutter进行跨平台移动应用程序开发— Xamarin — React Native：以性能为中心的比较

上周四（2017年8月），我荣幸地在弗吉尼亚州麦克莱恩市的Capital One的iOS峰会上发表了演讲。 这是我第三次参加会议，也是我第二次有机会上台。 场地是一个令人印象深刻的礼堂，组织无可挑剔，听众充满活力和开朗。 我参加了许多有趣的演讲，与来自全国各地的热情软件工程师会面并交流了想法。 我没有演讲视频，但我将分享摘要和幻灯片。 开始了。 移动应用程序开发已经超出了我们最疯狂的梦想。 据估计，全球有20亿部智能手机，其中99％以上运行iOS或Android。 为了吸引更多用户，开发人员需要同时针对这两个平台。 不幸的是，出于多种原因，这样做远非易事。 开发人员必须学习两种语言（在iOS上以前是Objective-C，但现在是Swift；在Android上Kotlin变得比Java势头强劲）和两种平台。 通常，还需要两个平台团队。 这种方法既缓慢又昂贵。 很难调整iOS和Android功能的发布时间表。 至少，App Store审核过程使及时发布iOS更具挑战性。 很难在任何一个平台上提供令人愉悦的体验，甚至更难重复两次。 更糟糕的是，如果并且当需要支持网络时（不幸的是有时是事后的想法），难度将成倍增加。 以前，我们已经看到了跨平台的解决方案，但是它们要么在性能上折衷，要么达到设计期望。 Google，Facebook和Microsoft一直在努力工作，我认为他们现在拥有值得再次关注的解决方案。 我想探索三种流行的框架：Flutter，Xamarin和React Native，解释它们的含义，工作方式，并以性能为重点将它们相互比较。 我的希望是，阅读本文后，您会被启发去检查它们，并足够了解，以便在您的脑海中制定出哪种技术可能是满足您需求的正确选择。 让我们从Flutter开始。 这是由Google开发的开源移动应用SDK。 它为开发人员提供了一种简单而又高效的方法，可以在Android和iOS上构建和部署美观，高性能的移动应用程序。 它的独特之处在于它既不使用Web视图也不使用iOS / Android UI组件，但仍使用其自己的呈现引擎以本机方式绘制所有内容。 Flutter团队没有重新发明轮子，而是对Google内部的项目进行了广泛的研究，并在合理的范围内重复使用了许多现有代码。 他们从Chrome，WebKit，Android中获取了相关内容，并构建了一个苗条的C ++引擎。 他们选择使用Dart构建其余框架。 该框架实现动画，绘画，手势，渲染，并提供Material Design组件的实现以及稀疏的iOS主题组件库。 在iOS上，C ++引擎是使用LLVM编译的，而Dart代码是AOT（提前）编译成本地代码的。 在Android上，C ++引擎使用Android NDK（本机开发套件）进行编译，并且Dart代码在Dart VM（虚拟机）上运行，后者生成JIT（即时）编译的优化本机代码。 实施JIT编译的系统会连续分析正在执行的代码，识别出可能加速的部分，并将这些代码段转换为设备的CPU指令集。 转换后的代码称为本机代码，它直接在CPU上执行，而不是在VM上运行。 Flutter的特定于平台的API支持不依赖于代码生成，而是依赖于灵活的消息传递系统。 应用程序的Flutter部分（客户端）通过平台通道将消息发送到应用程序的iOS或Android部分（主机）。 主机在平台通道上侦听并接收这些消息。 然后，它使用本机编程语言调用任意数量的特定于平台的API，并将响应发送回客户端。 有关典型Flutter应用程序的内存，CPU和GPU利用率的性能讨论，请参考幻灯片。 有趣的是，我在运行这些测试时发现了内存泄漏问题。 我还没有机会向Flutter提交错误，但我将在接下来的几天内提交。 让我们进入列表中的下一个框架Xamarin。 Xamarin是Microsoft开发的一种开源技术，用于使用C＃来构建iOS，Android和Windows Phone […]

世博分离的应用程序：从“ npm install”到商店：简介

首先，我将简要介绍一下自己，以便使所有事情都有意义，而我的动机也不会迷失。 是的，我是一名JavaScript开发人员，直到现在，它仍被认为是用于浏览器和Web的语言，但是最近随着Node（针对服务器端）和React Native（针对本机iOS和Android应用程序）的出现，javaScript生态系统正在像其他任何事物一样不断壮大。 因此，为了跟上步伐，最重要的是不失去工作，我跳入了React Native的生活方式。 在浏览文档并修改CRNA（create-react-native-app）时，我偶然发现了Expo。 世博会的好人已经烧掉了午夜的油，这样我们就不必再想出一种了不起的产品，它使您可以更快地构建应用程序。 通过完全消除本机元素，他们简化了从在设备上进行测试到发布应用程序的整个构建过程。 他们还提供一些免费服务，例如Push Server，托管JavaScript捆绑包和一些React组件，这些服务使您的生活变得更加轻松，尤其是当您访问设备存储或捕获用户位置时。 使用Expo很棒，但是有时候您需要在应用程序中集成一些东西，而Expo到目前为止还不支持这些东西，并且您需要自己修改本机代码。 在这种情况下，expo为您提供了“ 分离 ”应用程序的选项，这在外行的术语中基本上意味着 “将本机代码公开给开发人员，现在进行管理是我们的责任，而不是他们的责任”。 通过博览会分离的好处是您仍然可以 在您的服务器上托管Javascript Bundle的支持，使您可以进行OTA更新。 分离后，他们会为您提供一个Expo Kit，其中包含所有JavaScript软件包，可以使开发更加容易。 坏事 您需要自己在App Store和Play Store上发布构建。 他们取消了对推送通知的支持，现在就可以将推送集成到您的应用程序中了。 在很多情况下，他们只是拒绝提供支持，指出它超出了他们的“博览会领域”。 但最重要的是，成为问题的是管理构建过程，即使用expo工具包管理本机代码，如果您有多个环境，则将变得一团糟。 本系列文章的重点是帮助您解决相同的问题，使您的生活更轻松，并且特别是如果您来自Web开发背景，则可以简化本机代码的处理。 它将包括 为不同的环境（生产，开发，UAT，QA）提供不同的服务包。 管理应用程序构建以使用定义的环境包。 管理特定于环境的变量，例如API URL。 最重要的是，通过自动化一些流程并避免人为错误，从而使构建过程变得万无一失，尤其是在团队合作中。 注意：这些是我使用的步骤，它对我有用。 对于其他人，它可能有所不同。 这个想法是给一些方向。 此外，本系列文章也不是用于编码expo或本机反应的教程。 这将有助于： 对本机构建过程有新反应的人 人们不了解本机代码并发现它令人生畏 人们已经知道Expo和React native 他们已经弄乱了头发，弄清楚了这个烂摊子。 ：p 该系列的先决条件： 应该了解React Native和Expo 应该了解脱离世博会的概念 我很想听听您对此的看法。 另外，如果您有构建过程，则可以在“响应”部分中共享它们。 让我们将此变得有趣而有益，以便每个人在这里都学到一些东西。 继续阅读！ 继续编码！ 更新：本系列的第二部分已经结束。 […]

如何将现有的本机应用程序集成到React-Native SDK

为什么写这篇文章？ 本文为您的iOS应用程序与React-Native SDK集成提供了非常基础且足够详尽的步骤。 如果按照上述所有步骤进行操作，那么到本文结尾，您将准备好完全集成的React-Native-iOS应用程序。 假定观众 假定您是一名程序员，并且具有为iOS，Android和Web平台中的任何一种构建应用程序的经验。 我希望您将macOS升级到Mojave（版本10.14.1），以使将来的开发更加顺畅。 它着重于使本地应用程序在react-native SDK中运行所需的基本更改。 快速了解React-Native项目的背景 首先让我快速介绍一下为什么我们非常需要这种集成。 我们在nearbuy.com上试图找出哪种UI / UX设计和功能最适合通过Web，M-Web（PWA），iOS和Android等各种平台访问我们产品的客户。 因此，我们开始在Web应用程序和PWA的各个页面上进行实验，这是因为通过部署时间的灵活性和快速向所有可能的最终用户进行更新的实验变得容易。 我们认为通过PWA进行的流量可以充分代表完整的移动流量的行为，即m-web，iOS和android的结合，但事实证明这还不够好，而通过本机应用进行的实验会浪费大量时间和资源因为本地更新涉及许多耗时的步骤，所以它是组织的一部分。 然后我们想到了将现有的本机应用程序集成到React-Native SDK中的想法。 此设置可帮助我们在需要时通过任何数量的动态应用程序更新/实验来吸引最终用户。 缩略语使用 RN：React Native PWA：渐进式Web应用程序 移动网络：移动网络 cli：命令行界面 RN包装器/ RN SDK：RN的“ Hello World”应用 第1步：设置React-Native SDK包装器 这是此设置最简单的部分。 对于初学者，您必须 按照此处的说明安装节点。 通过运行终端命令sudo npm install -g react-native-cli安装RN sudo npm install -g react-native-cli 。 您可以安装一个名为Watchman的软件包来监视文件系统中的更改，尽管这不是首要任务。 现在要创建RN包装器，请首先转到要保留RN项目代码的文件夹，然后在terminal中运行react-native init 命令。 此安装将花费一些时间，因为它涉及到安装诸如react＆react-native之类的库以及所有必需的依赖项。 RN包装器已准备就绪，可以进行进一步的集成，其结构应与下图中的结构完全相同，除了项目的名称。 步骤2：安装cocoapods并进行设置 这可以帮助您安装Xcode。 要在Xcode中运行iOS项目，您需要cocoapods。 […]

在混合应用程序中将React Native从0.39.0升级到0.42.3

在Tido，我们以一种非典型的方式使用React Native。 它最初是一个纯iOS应用程序（Swift + Objective-C），然后我们慢慢开始将React Native组件嵌入现有视图中。 结果，我们的项目结构是非标准的-意味着我们没有典型的/ ios和/ android文件夹，并且某些自动化工具（例如：react-native-git-upgrade）可能永远无法使用我们的项目。 因此，我们继续进行“手动升级”。 快进了4个痛苦的日子，我们终于成功了（星期五下午4点！）。 有关此过程的信息很少，特别是对于非标准项目。 尝试了很多事情。 我们经历了每个GitHub问题和每个似乎与远程相关的StackOverflow问题。 没有成功 但是，我们认为我们设法简化了升级所需的步骤。 而且我们已经成功地重复了几次该过程。 希望这可以对某人有所帮助。 注意：当我们第一次将React Native集成到项目中时，完全有可能“奇怪”地进行设置。 可能导致不必要的痛苦。 我们欢迎任何意见/建议/建议！ 1.清理您的节点依赖项 我们发现rm -rf ./node_modules可以解决很多问题，因此我们从这里开始。 2.清理您的构建文件夹 这里主要学习 。 在任何情况下，都不要在升级过程中信任Xcode缓存。 在很多情况下，我们认为它可以正常工作，只是清理了构建文件夹，并在后续构建中出现了故障。 Xcode中的快捷方式是Option-Shift-Command-K 3.关闭Xcode。 当对外部文件更改做出反应时，Xcode似乎并没有表现出一致的行为。 因此在关闭Xcode的情况下更改文件似乎更安全。 4.手动编辑您的节点依赖性 我们手动执行此操作，以便可以创建一个真正干净的node_modules目录。 更新您的package.json以使用react-native@0.42.3 5.重新安装您的节点依赖项 npm install 6.编辑Podfile以包括桥接到本机的依赖项 在下面的Podfile摘录中，我们必须添加第Podfile行： 10.将React添加到方案中的构建步骤 打开Product菜单，转到Scheme -> Manage Schemes然后双击所需的项目目标。 选择Build方案，并将React.framework步骤添加到方案中作为第一项，然后取消选中Parallelize builds ： 11.修复本地引用（即：使用引号将导入转换为使用尖括号）。 在我们的案例中，我们需要在“ bridge”文件中进行更改（即：声明用于在Native / […]

Swift不应该成为iOS的未来

Swift试图做到两件事：一种针对高速和内存效率量身定制的语言，以及一种提供高级抽象的语言。 但是大多数应用程序不需要达到很高的性能水平。 滑动后，代码将在页面之间转换，然后CPU闲置坐在那里，直到用户启动其他操作为止。 大多数用户界面代码可以忍受100ms，但是Swift的目标是1ms。 关于我们的应用程序，最慢的事情通常是数据I / O，而这是语言甚至无法解决的！ 在某些情况下，确实需要某些代码真正快。 它分为两大类：游戏和数据算法。 我不是在这里谈论游戏，那是完全不同的野兽。 但是对于算法，它们可以与其余代码库分离和隔离。 其余代码不需要太快。 更重要的是它简单，容易并且具有高级抽象。 这就是为什么我认为Apple明智的做法是使JavaScript成为面向iOS平台的一流语言。 如果要保持类型安全，则可以集成TypeScript。 VS Code中已经有非常好的IDE支持，所有这些都是开源的，因此Apple可以将其集成到Xcode中。 （我完全知道建议苹果使用微软制造的东西具有讽刺意味，但这并不会自动使它成为一个坏主意！他们应该使用正确的工具来完成这项工作。） 这样，对于需要关注性能的狭窄区域，它们仍然可以用C编写，Apple甚至可以创建一个小桥梁，在该桥梁中可以从JavaScript自动调用C代码，并自动转换类型。 他们已经使用Swift做到了这一点，肯定可以使用JavaScript再次做到这一点！ 许多用户都在使用许多流行的React Native应用程序。 尽管它们确实比本地应用程序慢，但这也意味着如果苹果自己创建该层的自己的版本并将其作为一种幸运的本地开发方式，那么他们将有更多的机会对其进行优化。 这将使Apple过渡到更现代的视图处理方法有多容易。 确实，ViewController，情节提要和自动布局朝着正确的方向发展，但它不应成为最终的目的地。 React，React Native和Flutter都向我们展示了开发人员渴望一种更简单，更直观的方式来构建移动应用程序。 现在，苹果需要采取行动，采取主动行动，否则就有落伍的危险。

实现者通知将iOS推送到React Native

Sigo trabajando con React Native发行并发行了一份新的文档，介绍了iOS上的通知。 Espero sirva de ayuda ya es unaguíacon los pasos que he se seguido hasta tenerlas funcionando。 ¡Comencemos！ 简介 凡事互助的基本法令，在没有通知的情况下即可进行，包括： Comopodéisver aparecen 4个元素： Elprovedor de notificaciones， es decir和nuestro 后端。 苹果公司的 APN声明， Apple毛绒通知服务 ， 声明和服务证明了Apple的确凿通知书和los Dissarrolladores Para Enviar通知书。 El Dispositivo iOS Asociado 是的，请在新的通知后再使用。 Para que todo este“ chiringuito” funcione son necesarios los […]

通过React Native触发iOS 10可操作的推送通知

在本教程中，我们使用Xcode和React Native来配置和创建本地自定义推送通知。 背景 通知内容扩展用于显示iOS应用通知的自定义界面。 React Native可让您仅使用JavaScript构建移动应用 使用React Native创建一个新应用 请按照此处的说明安装React Native并生成一个新项目： 在Xcode中启用推送通知 您可以按照此处的步骤启用本地推送通知： 确保您的捆绑包标识符是唯一的。 尽管还有更多步骤可以启用远程通知，但您所要做的就是切换此开关以启用测试本地推送通知。 在Xcode中链接React Native的PushNotificationIOS库 请按照此处的说明将React Native的PushNotificationIOS库链接到Xcode。 使用Xcode在您的应用中创建新目标 选择您的Xcode项目，然后添加并命名一个Notification Content扩展目标： 告诉Xcode如何找到您的通知 出现新目标。 选择它，然后在其Info.plist中 ，设置UNNotificationExtensionCategory和UNNotificationExtensionInitialContentSizeRatio的值。 测试来自React Native的推送通知 在您的React Native代码中导入库： 从’react-native’导入{PushNotificationIOS}; 触发来自RN的推送。 确保使用上面创建的类别： componentDidMount（）{ PushNotificationIOS.requestPermissions（）; PushNotificationIOS.presentLocalNotification（{ alertBody：“ Hello World”， 类别：“ myNotifcationCategory” }）; } 在React Native中启用LiveReload后，当我关闭应用程序并保存RN文件时，可以看到推送通知： 下一步：自定义视图并处理用户操作 在这里，您可以编辑NotificationViewController.swift文件以实现didReceive方法。 使用它来配置您的通知界面并处理用户操作。 在RN中使用userInfo对象将任意信息传递到Xcode ViewController，从而填充MainInterface.storyboard提供的UI字段。