Tag: React

我们的第一个React Native应用程序

在过去的2/3个月中，我们一直在使用React Native来构建一个本机iOS应用程序，以向客户端展示复杂的交互式用户流。 作为React.js领域的新手，您可能想知道为什么我们会选择做这样一个疯狂的事情，所以这就是故事了。 主要写给同事以了解技术决策和学习。 React Native帮助我们在更短的时间内交付了最小可行的产品，并以更高的质量提供了更多功能。 作为该项目的首席开发人员，利用ES6之类的本地开发经验有限，这是很有意义的。 尽管这是一个实验，但我以后肯定会在React Natives的一角。 选择React Native 现在，市场上肯定有很多选择可以帮助您构建移动应用程序，例如NativeScript，Ionic，当然还有Swift。 让我们从Swift开始，本机实现很棒，并且拥有其他选项没有的功能，但是我们没有内部专业知识，需要整个开发团队都可以访问的解决方案。 其次，NativeScript，Ionic和PhoneGap都是出色的竞争者，但整个空间都显得肿。 例如，您可能将NativeScript与Angular结合使用，从而增加了依赖性和复杂性。 在线上有大量文章可以帮助您权衡所有选择。 现在我们进入React Native。 正如创建者所描述的那样，它是“用于构建用户界面的Java脚本框架”，因此，这听起来像是一个极好的竞争者。 它也是较稳定的选项之一，可能会保留一段时间，值得我们花时间学习。 顾名思义，React是基于反应性数据流构建的，它仅具有单向数据绑定，从而大大简化了发送逻辑。 我们的规范是一个iOS应用程序，但未来可能会出现Android，因此我们也在这里介绍，因为React Native符合这两个规范。 您还可以使用其兄长React.js来构建Web应用程序。 由于易于开发，应用程序质量，性能以及支持React的生态系统，我不仅获得了极大的乐趣，而且感到React Native是该项目的正确选择。 出售React Native的两篇文章：IOS开发人员正在切换，Smashing Magazine考虑使用React Native。 如果您只是刚开始，Cam Jackson撰写了一篇非常不错的初学者文章。 挑选样板 现在有许多样板，具有许多不同的配置选项。 意大利辣味香肠和Ignite只是两个例子。 这两个项目都非常出色，但对于这种简单的设计规范而言，有点“胖”了。 我选择了一个样板，它提供了很好的技术基础，但没有太多与该项目无关的功能。 马特·麦克纳姆（Matt Mcnamee）做了出色的工作，创建了一个简单快速的样板来启动和运行应用程序，经过大量审查，我选择了此作为起点。 具有一些出色的功能，例如：Redux，React Router，Native Elements和内置的样式指南，您怎么会出错。 在这里查看。 现在所有这些项目都以Redux为标准，作为React的新手，我选择使用Redux的设置，但我自己没有参与。 原因：“除非您对香草React遇到问题，否则不要使用Redux” @dan_abramov — Redux的合著者。 应用架构 由于此应用程序主要显示了套管用户流程和交互，因此我们实现了智能组件和愚蠢组件。 我们使用React Router进行页面导航，因为样板已经很好地进行了设置，并且有许多在线文档可以帮助您进行配置。 智能组件的UI逻辑存储在状态中，容器组件将它们包装在一起。 这里有一些关于在React State和Redux […]

反应本地人— Mobil UygulamaGeliştirme

Mobil tarafta IOS 客观目标C veya Swift， Androidtabanlıtelefonlara ise java dili ile本机语言。 Bununyanında，javascript，使用JavaScript进行浏览。 在当地居民中反应当地人’denbahsedeceğiz。 反应Native facebooktarafındansunulan bir mobil uygulamageliştirmeçatısıdır。 IOS ve Androidtarafındanative kodlaraçevrilir。 Böylecetek kod ile birdençokplatforma mobil uygulamageliştirebilirsiniz。 Neden React Native’ıseçmeliyim吗？ 反应本机gerçektennative’dir。 Uygulamlarınızıuzaktangüncellemeimkanısağlar。 脸谱gibibüyükbirdestekçisivar Webtabanlıuygulamageliştiricileriçinöğrenmesürecikısadır。 Uygulamageliştirmesüresinative’egörekısadır。 反应本地’de uygulamaperformansınıarttırmakiçin组件方法larınındoğrukullanımıoldukçaönemlidir。 1个构造函数 Başlangıç国家’lerinitanımladığımızalandır。 Sayfa ilkyüklendiğindeburayadüşer。 2分量WillMount 组件ekranıyerleştirilmeden渲染’danönceçalışmaktadır。 状态集etmekiçinuygundeğildir。 设置状态çağırıldığındansayfasürekli渲染edecektir。 3渲染 SayfaüzerindebulunantümUI komponentlerin hepsi bu alanda bulunur。 Bir component’inçalışmasıiçindiğermethodlar […]

React Native和Flow入门

向您的React Native应用程序添加静态类型。 Flow使我们能够轻松地向我们的JavaScript添加静态类型检查。 Flow将帮助您防止错误，并可以提供更好的代码文档。 许多React Native文档和源代码已经使用了流程，因此从来没有比现在更好的时间开始使用它了！ 在本文的结尾，我们还将SublimeLinter-flow添加到Sublime Text中，以便在编辑器中进行实时类型检查！ 向React Native添加流 首先，让我们创建一个新的React Native应用程序： 反应本机初始化流程 .flowconfig文件是放置特定流配置的位置，类似于.eslintrc文件。 新的React Native项目带有.flowconfig用的预配置.flowconfig文件。 在本教程的其余部分中，我们将使用此默认配置。 如果您想自定义配置或了解有关配置的更多信息，请查看文档。 现在，我们需要使用flow-bin软件包安装flow。 cd进入根目录，然后在文本编辑器中打开.flowconfig文件，并查看底部以查看您的应用程序需要哪种版本的流： 对我来说，它的版本是0.33.0 ，所以它将成为我安装并另存为dev依赖项的版本。 纱线添加flow-bin@0.33.0 –dev 要么 npm我flow-bin@0.33.0 –save-dev 在本教程中，我们将按照文档以及我在社区中与大多数人交谈的建议在每个项目的基础上安装流程。 首选安装方法是按项目进行安装的原因是，不同的.flowconfig配置需要使用不同版本的流，如果在全局范围内安装它，则在很多情况下将无法正常工作。 要了解有关全局安装的更多信息，请在此处查看文档。 现在已经安装了正确的流版本，我们需要做的最后一件事是设置一个简单的命令，以便我们在每次键入check时都可以运行。 对我来说， npm run flow非常有意义，因此让我们打开package.json并将流程脚本添加到我们的脚本中： “脚本”：{ “ start”：“节点node_modules / react-native / local-cli / cli.js开始”， “ test”：“开玩笑”， “ flow”：“流” }， 现在，我们可以转到命令行来首次启动流服务器： npm运行流程 我们应该得到这个： 从文档： 使用Flow服务器 对于大型项目，您可能只希望Flow在文件更改时逐步检查文件。 […]

我们时代的问题

“ 我想启动一个网站及其移动伴侣应用程序。 该应用程序将在iOS和Android上均可用。 我听说React Native非常适合我。 真的吗？ ”🙍 有两种类型的用户。 那些使用计算机访问自己喜欢的网站的人，以及越来越多的喜欢使用这些网站的移动应用程序对应对象的人。 Facebook报告称，其中74％的用户浏览了全球最大的移动社交网络 在2017年。 考虑到这一点，作为产品的创建者/经理，您确实希望将其交付给最大的受众的机会很高：对于这两种类型的用户。 但是更糟糕的是 ，移动端本身可以分为两个更具竞争性的子类型。 即苹果和安卓 。 问题：用于实现网站 ， iOS应用程序的编程语言 或Android应用程序 本质上彼此不同。 那么，这具体意味着什么？ 好吧，如果您在一个平台上实施产品，该代码将不会“移植”到其他两个平台中的任何一个：大多数代码都将不得不重新编写。 换句话说，这意味着您的产品成本（几乎）必须乘以您希望支持的平台数量… 在大多数西方国家中，中型移动应用的平均价格在20万至50万美元之间，而网站的平均价格在5万至25万美元之间，您可能会怀疑： “好吧，但是，我是否可以不统一那些语言，并且对所有平台仅实施一次我的应用程序？ ”💁 反应 是Facebook开发的开源框架。 它于2013年推出，允许开发人员基于可重用的可视组件（例如，包含聊天中文本内容和时间戳的自定义蓝色Message气泡），使用JavaScript创建高级的Web用户界面。 它可以处理随时间变化的数据，而无需重新加载页面。 React Native也由Facebook开发。 两年后宣布，它扩展并把其哥哥React的力量带入了移动世界。 您将能够使用JavaScript编写您的移动应用程序。 您操作的元素将iOS和Android本机可关联元素包装到一个单独的React Native对象中，从而暴露出一个统一的API（例如，React Native scrollView元素桥接到iOS的UIScrollView和Android的ListView中）。 因为React Native建立在React之上，并且因为它们都依赖于相同的语言，所以这使他们有可能在诸如业务逻辑和后端集成等各种领域中进行大量协作。 这意味着，除了上述React Native提供的iOS和Android之间的统一之外，现在还可以在Web和Mobile之间建立桥梁。 框架的标题“ 学习一次，随处写 ”是一个 在Java的“一次编写，随处运行”上玩，现在变得更有意义：一旦您了解JavaScript和React工具集，就可以在任何类型的平台上实现所需的任何东西！ “ 好的，React Native为我提供了一种统一的语言，但是您仍然告诉我，我需要编写3种不同的代码库吗？ 有什么意义？ ” ‍🤷‍ 好吧，React Native […]

介绍Create XP App

今天，我很高兴发布Create XP App。 Create XP App是ReactXP项目生成器，可让您使用单个代码库构建可在iOS，Windows，Android和Web上运行的应用程序。 单击此处查看回购。 尽管这是一个正在运行的项目，但它肯定仍在进行中，在接下来的几周/几个月中，我将获得反馈，进行改进和改进。 关于ReactXP的一些事情 建立在React Native之上 由Microsoft开放源代码，在新版本的Skype中使用 推荐使用TypeScript 要了解有关ReactXP的更多信息，请查看其回购和文档。 要安装和创建应用程序： 安装cli npm我-g create-xp-app 2.创建您的项目 create-xp-app新的MyAwesomeProject 在网络上运行 运行npm运行Web-watch（这将编译并监视您的TypeScript） npm运行网络观看 2.在浏览器中打开index.html 在iOS / Android / Windows上运行 运行npm run rn-watch npm run rn-watch 2.启动打包程序 npm start // or use haul 就像使用任何其他React Native项目一样，使用命令行，Xcode或Android Studio来构建和部署本机应用程序代码。 要了解更多信息，发表意见或提交问题，请查看此处的存储库。 我叫 Nader Dabit 。 我是 AWS Mobile 的开发人员倡导者， 负责 […]

构建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从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 / […]

实现者通知将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 […]

比较Native iOS（Swift）和React-Native的性能

React-Native是一个跨平台的移动框架，可让您仅使用JavaScript来构建应用程序。 但是，与其他混合移动技术不同，您不是在构建“移动Web应用程序”（Web应用程序包装在本机容器中）。 最后，您得到了真实的东西。 您的JavaScript代码库已编译为与使用Objective-C构建的iOS应用程序或使用Java的Android应用程序无法区分的移动应用程序。 这意味着React-Native提供了本机和混合移动应用程序的好处。 我的目标是找出他们是否能够兑现承诺。 为此，我将需要在Swift和React-Native中构建相同的应用程序。 它必须足够简单，以便我可以同时学习两种语言并及时完成应用程序，但又需要足够复杂，以便可以比较每个应用程序的CPU，GPU，内存使用情况和电源使用情况。 该应用程序将具有四个标签。 第一个将被命名为“个人资料”，并提示用户登录Facebook，以检索用户的个人资料照片，姓名和电子邮件并将其显示在页面上。 第二个选项卡称为“待办事项列表”，使用NSUserDefaults（iPhone内部存储器）将是一个简单的待办事项列表。 它将具有“添加项目”和“删除项目”功能。 第三个选项卡将被命名为“页面查看器”，并将由一个页面查看控制器组成。 页面视图控制器将具有用户可以在其中滑动的三个屏幕（“绿色”，“红色”和“蓝色”屏幕）。 最终选项卡将被命名为“地图”，并将包括一个放大到用户当前位置的地图视图，在地图上带有一个蓝点代表用户的位置。 迅速的过程 首先是iOS和Swift。 学习Swift相对容易，因为它类似于我已经知道的许多语言（Java，C ++）。 但是，学习Cocoa Touch（iOS框架）是一项艰巨的任务。 我在Udemy.com上观看了罗伯·珀西瓦尔（Rob Percival）的视频系列，这是从Swift的引入到完成多个应用程序的全部过程。 即使在介绍性视频之后，我仍然在理解Cocoa Touch方面仍然遇到困难。 这些视频中的许多“学习”都涉及复制/粘贴代码，但我们不确定它的作用。 我什至有一种感觉，甚至老师都不知道，只是记住了。 我不喜欢不知道我的代码的每一行做什么。 毫无疑问，Apple的IDE（Xcode）非常先进且用户友好。 您可以单击“情节提要”，然后按所需顺序设置应用程序屏幕，在屏幕上将要启动应用程序的地方放置一个箭头。 在第一个标签（“配置文件”）中，我可以将图像视图，名称标签和电子邮件标签拖到所需的位置。 然后，我将其拖到代码中并进行连接，在此过程中的代码中创建了一个新变量。 然后，以编程方式，一旦用户通过Facebook登录，我就将这些变量名称设置为其相应的Facebook值。 花了3周的时间才完成了该视频系列，并在Swift / iOS中获得了舒适的编码。 您可以通过以下链接在GitHub上查看此应用程序的Swift版本的代码：https：//github.com/jcalderaio/swift-honors-app 反应本机过程 第二名是React-Native。 学习JavaScript比Swift难一点，但仍然不难。 我尝试从互联网上学到的React-Native片段中编写应用程序，但这还不够。 我需要一些视频讲座。 回到Udemy.com ，我观看了Stephen Grider对React-Native的精彩介绍。 起初，我感到难以置信。 React-Native的结构对我来说毫无意义，但是在观看了Stephen的讲座仅一周之后，我便能够自行开始编写代码。 我真正喜欢React-Native的地方在于，与iOS不同，您编写的每一行代码都很有意义-您知道每一行代码的作用。 另外，与iOS中不同（在iOS中，您必须调整每个页面的设置才能在不同屏幕尺寸的横向和纵向上看起来都不错），而在React-Native中，所有调整都是为您完成的。 没有任何设置，我使用的是横向制作的应用程序，看起来非常不错。 我以多种不同的iPhone尺寸运行了该应用程序，并且在那里看起来也不错。 由于React-Native使用flexbox（类似于HTML的CSS），因此它可以响应正在显示应用程序的屏幕大小。 您可以通过以下链接在GitHub上查看此应用程序的React-Native版本的代码：https://github.com/jcalderaio/react-native-honors-app *更新：由于升级到iOS 10，此源代码以前无法正常工作。我已解决了该问题，现在应该可以正常工作🙂 […]

React Native中的React导航和导航器简介

从应用创意开始，您就计划同时支持iOS和Android设备，但是花时间学习，实现和优化每个平台的单独导航代码并没有意义。 否-有一个更好的方法，使用基于Javascript的纯导航库，该库使用本机驱动程序进行平滑过渡。 React Navigation采用了这种方法，避免了在Objective C / Swift / Java / Kotlin中的任何必需知识，从而使您可以将更多精力放在应用程序体验上。 借助React Navigation，我们可以立即使用现代应用程序期望的所有转换，包括标签导航 ， 抽屉式导航 （向上滑动）， 堆栈导航 （在整个层次结构中滑动）和深层链接 。 本文将介绍在为应用程序设置基本导航系统之前与导航器一起使用的方法。 与许多React项目一样，官方文档相当冗长，而且不太统一。 但是，在建立了一些基础知识之后，我建议您通读本文，以巩固您的理解并熟悉所有配置选项。 什么时候不使用？ 至少对我来说，很难争论何时不对本地API使用React Navigation，因为经济上的好处和自定义远远超过了缺点。 如果您的应用程序没有执行非常密集的Javascript处理，则导航过渡不应该出现性能问题，该过渡支持60 FPS动画。 当然，当您在场景中引入更多复杂性时，您可以测试您的应用并找到表现与性能之间的平衡。 单纯的Javascript实现不会使您完全了解各个操作系统的本机API，但是您无法访问的内容是以受支持的导航器的一致性进行交易的，所有这些导航器都可以用纯Javascript配置。 对于一家注重Javascript的公司，希望在其所有产品中简化采用的技术，该软件包非常有意义。 总的来说，我对React Navigation以及React Native社区都非常满意，在撰写本文时，该软件包的每周下载量约为90k-100k。 数量可观。 使用yarn或npm将React Navigation直接安装到您的React Native项目中： 毛线添加react-navigationornpm install-保存react-navigation 理解导航器的作用本质上是使用React Navigation的唯一障碍。 让我们直接跳到他们身上。 React Navigation应用程序是一系列导航器 ，用于定义应用程序的屏幕流 。 如果现在还很模糊，那么图表就来了。 每个导航器都带有各种配置选项，我们可以用纯Javascript定义这些选项。 例如，堆栈的标题行为或选项卡的图标和样式。 导航器的行为将根据您选择的导航器而有所不同。 以下是我们可以使用的一些导航器选项： 我们还可以将导航器嵌入其他导航器中，以根据需要扩展我们的应用程序内容。 例如，我们可以在选项卡导航器中嵌入一个堆栈导航器，因此每个选项卡都包含一个层次化的视图。 这是React Navigation成为功能强大的工具的地方，它使我们可以根据需要雕刻导航。 […]