Tag: React

自定义React Native图标？是的: 2.编辑Info.plist并添加一个名为Fonts的属性，该属性由应用程序提供（如果Xcode无法自动完成/不使用Xcode，则为UIAppFonts），然后键入刚刚添加的文件。它看起来像这样：步骤1 在Sketch或Illustrator中创建图标，并将它们另存为svg。第2步转到http://fontello.com/并上传您的自定义字体。您也可以从它们的选择中进行添加，以使它们都保持相同的字体。第三步从Fontello下载字体文件并打开它。复制文件夹（其中的所有内容）并转到您的本地项目。进入保存资产的目录，并创建一个名为fonts的文件夹，然后将该文件夹粘贴到其中。我建议将文件重命名为“ fontello”。接下来，打开Xcode并执行与“基本安装过程”中所述相同的插入过程，但使用新的字体文件。完成此操作后，返回到项目所在的文本编辑器。步骤4 创建一个名为“ icon.js”的文件。创建文件后，添加以下代码。第5步然后，在需要图标的组件中，您将可以执行以下操作：希望这对像我一样挣扎的人有所帮助。干杯!

为iOS打开Sourcing ReactiveLists: 在过去的几年中，PlanGrid iOS团队构建了许多内部API，使我们能够更快，更一致地发布新功能。今天，我们将公开发布第一个组件-您现在可以在GitHub🎉上找到它。我们的团队有许多开放源代码爱好者，并且我们还使用了大量开放源代码库，因此我们一直计划随着时间的推移发布这些组件。使用UIKit进行声明式UI编程 ReactiveLists是一个类似React的API，建立在UITableView和UICollectionView 。该API使我们能够编写无状态函数来生成用户界面。根据我们的经验，这些无状态函数比*DataSource和*Delegate类型更容易理解，后者是向UIKit组件提供数据的标准模式。 API的用法通常类似于下面的示例，您编写了一个将数据映射到ReactiveLists视图模型的函数，从而产生了一个非常易读的无状态函数：这不仅使UI代码易于阅读和迭代，而且使其易于测试。我们的团队成员Benjamin Encz在他的演讲“将UIKit内外翻”中深入讨论了这种声明性UI编程方法的优势。从封闭到开放我们团队中有很多人为开源项目做出了贡献，或者从头开始创建了自己的项目。事实证明，将在现有代码库中演化的组件开放源代码采购的经验大不相同。我们花了几天的工程时间将组件移至其自己的Swift框架中，删除了对核心应用及其单元测试助手的依赖，将ReactiveSwift集成移至扩展中，并花费大量时间重命名API，改进文档和重构了测试套件。最重要的是，我们构建了一个示例应用程序，使该库更易于理解。这是开放构建的另一个好处-它提高了在我们代码库的大部分中使用的组件的数量。准备生产，但不准备1.0.0 我们没有等到该库完成后才将其发布给公众，因为我们相信它在当前状态下会增加很多价值。我们发布的版本是已经在PlanGrid iOS应用程序中发布了近两年的版本。因此，我们绝对认为该库可用于生产。也就是说，我们期待大量改进，并且API不断变化，因此将此版本发布为0.1.0 。结论我们认为这是与iOS社区共享一些内部API的第一步。我们每天都看到利用开源软件的好处，并且很高兴能够做出贡献。

反应本地培训: Callstack.io 的 Nader Dabit 和 Mike Grabowski 专业的React Native研讨会和公司培训。今天，我们很高兴启动React Native Training。毫无疑问，React Native在去年特别是在过去的几个月中确实起飞了。尽管React Native一直是初创企业和中小型企业的可行选择，但我们现在看到越来越多的公司和企业公司正在研究和整合该技术，并使用该框架重写许多现有的本机应用程序。在本机跨平台移动应用程序开发成本上升和效率下降的刺激下，React Native现在不仅是可行的选择，而且对于大多数用例而言，对于现实世界中的移动应用程序开发而言，它是成倍节省成本的方法。随着受欢迎程度的提高，现有开发人员需要在尽可能短的时间内快速熟悉该框架。像任何技术一样，没有比在该领域的顶尖人士上手进行培训更好的方法了，通常是几天之内就学会了数周或数月的时间。我们将在北美和欧洲提供世界一流的前沿培训和课程材料，专门针对两件事：教室研讨会和现场公司培训。如果您对我们来到您的城市感兴趣，请给我们发送电子邮件至info@reactnative.training或访问我们的网站reactnative.training。如果您对专业的Web或移动应用程序开发或咨询感兴趣，请确保查看专门从事React和React Native开发的CallStack.io。谢谢你的时间！

ReSwift — Redux风格的单向数据流: ReSwift是Swift中redux哲学的实现。如果您不熟悉Redux，那就是管理应用程序的状态。这样它总是可以预测的。让我们看一下下面的架构以更好地理解它。存储 -这是应用程序整个状态所在的位置。状态可以只是查看状态，甚至可以是数据库状态，应用程序状态等，具体取决于您要如何使用ReSwift。我建议仅将其用于视图状态，因为ReSwift在主线程上执行。视图 -视图部分是整个视图层或应用程序的外观。简而言之，视图是状态的函数，在任何时候它都只是应用程序状态的一个很好的表示。动作 -动作是通过用户交互通过视图分派的，并且由商店使用，然后商店会更新应用程序的状态。这里还有其他两个部分– 减速器 —减速器是纯函数。他们消耗一个状态，一个动作并产生一个新状态。中间件 -上面的图中显示了中间件，但是中间件在还原器之前起作用。每个动作都必须经过中间件，并且它可以对该动作起作用。它们对于事件记录和操作计划非常有用。如果您能想到更多案例或想讨论中间件的用例，请在下面的评论中发表。在普通的iOS应用程序中，ViewController倾向于承担比任何其他组件更多的责任。随着屏幕复杂性的增加，在我们的视图控制器中维护干净的代码变得越来越困难。您可以将其与用例联系在一起，在这些用例中，我们最终向视图控制器添加标志和枚举，以使其适用于不同的状态。记住很难重现的错误，因为只有当您以特定组合执行某些操作时，这些错误才会浮现出来。 ViewController已经承担了很多责任。跟踪标志，枚举和查看数据是它应该担心的最后一件事。想象一下，每当您看到与视图相关的错误时，如果只有一种检查方法，这将是多么容易！使用ReSwift时，View只是状态之上的皮肤。这意味着，只要您发现视图有问题，就可以随时检查状态以检查不同的值。同样，状态只能通过调度动作来更改，因此您可以轻松找出导致该状态的动作。如果预测不是很简单，则可以使用中间件来记录所有已调度操作的日志。我们知道iOS中出现了许多架构，例如MVVM，MVP，VIPER等。ReSwift以非常独特的方式将自己与这些架构区分开。如果仔细观察，所有其他架构都将重点放在责任分离上。 ReSwift可帮助您管理应用程序的状态。这也意味着ReSwift可以轻松地与同一应用程序中的所有这些架构共存。基本原则所有视图数据都应以某种状态存储。在任何时间点-整个应用程序（如用户所见）都是该状态的“很好的表示”。只能通过调度动作来修改状态。对于每个视图控制器，只有一个类（通常是演示者）将侦听并响应状态更改。与MVP并肩作战代码示例以下是图像库应用程序中的代码片段，展示了ReSwift框架中的语法片段。有关完整的代码，请访问https://github.com/amreshkumar/ReSwiftDemo

Dropanon: 为什么我构建一个React Native App Dropanon出生于我寻找解决两个目标的方法时：在React Native中从头开始构建一个应用程序通过Apple App Store提交过程获取应用该产品本身是出于我对在线匿名性的个人爱好而诞生的，而我的联合创始人则非常讨厌别人发表Yelp评论来建立自己的在线品牌。什么是Dropanon？ Dropanon是一个基于位置的匿名消息传递应用程序，当前可在iOS应用商店（Android即将推出）上使用。用户可以将单词，表情符号或链接放在他们的位置。每个液滴的半径为75米，只能在该半径范围内读取。认为它像涂鸦。液滴在地图视图上可视化，并在提要/列表视图中读取。该地图将仅可视化距用户最多500米的跌落。施加此限制是为了限制客户端需要发出的请求的数量，并鼓励用户四处走走和探索。每滴都是匿名的。存储的唯一标识符是RFC4122 v1唯一用户ID（使用React Native UUID1）。此UUID仅用于允许用户标记或阻止其他用户（这是App Store的要求）。当前，液滴将永远存在并按时间顺序显示给用户。我们已经收到的一些反馈是使滴剂暂时消失-在一定时间，数分钟或数天后使它们消失。这是我们将来可能会做的事情，但就目前而言，您的贡献将继续存在。怎么样 Dropanon使用React Native和Reflux构建。持久性由Firebase处理（对于地理查询，则由GeoFire处理）。从启动开始的基本应用程序流程如下：初始化应用程序和加载视图。这在顶级React组件App.js中处理。在componentDidMount() ，这里发生了很多事情，例如检查用户是否已入职或是否已授予正确的权限（在使用应用程序时的位置）。所有的Reflux商店也在此处初始化，并附加了侦听器。如果缺少权限，用户尚未注册或发生其他问题，我们将适当处理。由App.js初始化的Reflux商店开始处理各自的任务。这些在逻辑上分为： ErrorStore ， FirebaseStore ， GeoStore和TimerStore 。 ErrorStore.js ErrorStore负责错误。任何捕获到的错误都将传递给它，然后传递回App.js ，然后在顶部显示一个错误栏，告诉用户出了什么问题。可以通过点击横幅关闭横幅。 FirebaseStore.js 所有滴都保存到Firebase的实时数据库之一并从其中读取。 Firebase允许我们省去编写自己的后端的工作，很快我们就可以运行并运行原型。 […]

24小时内的应用程序：我的React Native体验: 对于最终版，我删去了一些功能，而略过了其他功能，例如菜单栏，上/下投票动画以及最重要的是语音搜索。这是一个有趣的小项目，I̶̶a̶m̶̶c̶u̶r̶r̶e̶n̶t̶l̶y̶̶d̶e̶b̶a̶t̶i̶n̶g̶̶o̶n̶̶w̶e̶t̶h̶e̶r̶̶t̶o̶̶o̶p̶e̶nlisht̶i̶n̶t̶l̶y̶n̶-̶ React Native是一个很棒的JS框架，用于构建应用程序，我已经利用该框架构建跨平台应用程序的功能开发了我的第一个功能齐全的android应用程序。 RN非常适合真正的基本应用程序，这些应用程序在应用程序商店中占很大比例。对于游戏或其他广泛交互和自定义应用程序等其他热门游戏，坚持使用Swift / Objective-c或Java等本地语言将是您的最佳选择。我肯定会越来越多地使用RN，看看在2017年将带给我什么。 ✌🏾 该项目现已在Github上开源 Apple拒绝了Urban Dictionary应用程序，因为它与现有应用程序过于相似。 🤷🏽‍

iOS Mobile与React Native，Yarn，GreenhouseCI，CodePush和HockeyApp的持续集成: 自从问世以来不到两年，但是React Native已经扰乱了移动开发。 React Native采用了卓越的开发经验，轻松的启动时间，“一次学习，随处编写”的精神以及热情的社区，因此赢得了本机和Web开发人员的一致好评。随着React Native社区的不断发展和成熟，软件工程最佳实践开始显现。任何平台开发的一项重要最佳实践是持续集成的概念。一段时间以来，出于自动化的原因，自动化的构建和部署一直是Web开发社区的主要内容：效率低下，手动且易于出错的构建和部署在现代开发中不应该成为现实。相同的信念已经进入移动开发，现在有大量支持自动化构建和部署的工具。在本文中，我们将利用一套流行的工具（GreenhouseCI，CodePush和HockeyApp）以及React Native应用程序来实现强大的移动CI系统。重要说明： GreenhouseCI不“正式”支持React Native，但其构建系统具有促进React Native应用程序CI的所有先决条件。这就是下面的说明如此涉及的部分原因。可以在此链接上找到此博客文章的示例应用程序。假设条件本博客文章假定以下内容：您具有React Native开发的工作知识，包括NPM的工作知识您已经为iOS应用设置了证书和配置文件您正在使用Yarn管理您的React Native依赖项关于版本的注意事项此博客文章的编写具有以下版本：节点：6.9.0（LTS） React Native：0.36 纱：0.15.1 贸易工具在开始之前，需要注意这些工具的含义以及它们对于有效的移动CI系统的重要性。 GreenhouseCI ： “ CI即服务”平台，可轻松配置适用于本机和混合应用程序的移动CI Yarn ：Facebook创建的程序包管理器，允许进行快速，确定性的依赖项管理 CodePush ：由Microsoft构建的库和基础结构，可通过无线（OTA）更新基于JavaScript的混合平台 HockeyApp ：Microsoft的一项服务，允许将应用程序Beta有效地分发给测试人员和谐地使用所有这些工具，使移动开发人员可以将更多的精力放在他们产品的质量上，而手动准备好要测试和部署的应用程序效率低下。我们的目标到本文结尾，我们将完成以下工作：为我们的iOS React Native应用程序设置CodePush项目在我们的iOS React Native应用程序中集成了CodePush 为我们的iOS React Native应用设置一个HockeyApp 为我们的iOS […]

立即响应Native和Apple TV: 我总是检查React Native中每个发行版的注释。前几天，我对v0.36.0-rc.0中一个有趣功能的宣布感到惊讶：对Apple TV的支持。我从查看提交（由dlowder-salesforce所做）开始，我发现UIExplorer示例项目已经对此提供支持，但是由于状态栏存在问题而无法正常工作，我认为这是因为没有t状态栏。在分析了对项目所做的更改并阅读了github报告的有关该主题的票证之后，我找到了启用Apple TV的必要步骤。好的，现在不用多说，这里是将Apple TV支持添加到新的React Native项目的步骤。我将在步骤中尽可能详细：创建一个新项目 react-native初始化apple_tv_example 使用package.json中的候选发布者用以下命令替换本机版本（在我的情况下为^ 0.35.0）： git：//github.com/facebook/react-native.git#v0.36.0-rc.0 注意：由于它将是版本的一部分，因此将来将是可选的。通过运行安装对软件包所做的更改我注意：您会收到一个 UNMET PEER DEPENDENCY 错误-没关系。要验证软件包是否已正确安装，请在 node_modules / react-native 下的文件中查找对 TARGET_OS_TV的引用，应该有很多。通过在xCode上转到“文件>新建>目标”，然后选择“ tvOS>应用程序>单视图应用程序”，将tvOS应用程序添加到项目中。通过在Linked Frameworks and Libraries中按“ +”将所有tvOS库链接到新目标。在工作区中，搜索包含“ tvOS”的所有库，然后添加它们。通过添加来添加对ObjC和LC ++的支持 $（继承）-ObjC -lc ++ 到“构建设置”下的“其他链接器标志”。删除为新目标创建的文件夹内的所有文件和文件夹，但保留Info.plist。通过删除Main storyboard文件的基本名称（假设我们不会使用任何Storyboard）并添加App Transport […]

React Native是否已取代Native？: 作为iOS开发人员，我很快就判断出React Native，并认为这是构建移动应用程序的另一种次等且基本的方法。我认为，显然，如果应用程序是用JavaScript编写的，则不会感到原生，但我所忽略的东西已成为迄今为止最先进的跨移动解决方案。可以猜到，当React Native发布并受到大量炒作时，我希望平台会很快消失。我可能只是担心自己的工作安全性，因为JavaScript程序员现在能够开发本机应用程序，但是我认为问题更加严重了。我担心这会导致一波不太自然或自然的应用程序浪潮。在使用该平台玩了将近一年之后，我开始喜欢它的开发模式，大多数样式技术，甚至用代码编写视图。这就提出了一个问题，React Native是否取代了本地移动开发？ UIKit最近为我做了什么？当iOS在2008年开设App Store时，它便将开发解锁到了一个我们从未见过的世界。但是随着岁月的流逝，Objective-C和iOS开发模式开始显示出自己的时代。 Auto-layout和MVC是主要的iOS开发模式，通常会吸引开发人员来创建大量的，充满错误的ViewController文件。当然，用Objective-C编写将应用程序锁定在iOS平台上，并且随着Android用户迅速超过iPhone用户，这成为了一个巨大的痛点。 React和React Native本质上具有一种开发模式。通过组件的单向数据流。需要几个示例项目来采用，但是它从根本上改变了我们构建视图的方式。现在，我们可以根据其输入来推断视图的外观，因为这些组件具有功能性和确定性。除了巩固新的移动开发模式外，React Native还将移动开发与大型JavaScript社区联系在一起。为了管理依赖关系，我们现在有NPM。对于更多功能性的数组操作，我们现在有ES6和lodash。可靠的开源JS项目列表远远超过了Objective-C的开源社区，现在移动开发人员可以利用它。本机开发具有如此缓慢的开发迭代。要在应用程序的配置文件页面上更改像颜色一样简单的内容，您需要重新编译，运行，导航到屏幕，最后验证更改。 React Native仅需构建一次应用程序，然后每次进行更改便重新加载JavaScript，从而彻底改变了工作流程。无需等待编译。此外，React Native还包括热模块重载，这使开发人员可以保存文件并立即查看视觉和逻辑更改，而无需重置应用程序的状态，并且要求开发人员手动浏览应用程序以验证状态。这些是未来的工具。（我什至没有时间进行Redux和时间旅行调试）好吧，有什么坏消息？是什么阻止每个人都在React Native中编写每个新应用？首先，尽管Facebook和React Native的开源团队在与Apple和Android设备API（例如，推送通知，手势，摄像头等）实现可靠接口方面做得很出色，但许多API仍未完成。如果您对应用程序的想法需要音频，视频，麦克风，蓝牙或地理位置，那么您将需要依靠第三方解决方案或在Objective-C和Java中实现该功能以及创建接口。接下来，由于React Native仍在成熟，对该软件包的更新通常会有重大更改，并且需要大量重构。您可能会问：“为什么不坚持使用您开始使用的版本？”好吧，如果Facebook发布了您需要的新界面，或者您真正想要的第三方程序包需要的版本比您需要的版本新，那么可能是该死的时候了并按照Facebook的指南升级React Native。当涉及到移动开发，尤其是iOS时，导航是用户体验的重要组成部分。令我惊讶的是，发现React Native的Navigator实际上比原生iOS或Android更具挑战性。这是React Native社区中的一个已知痛点。 Facebook正在转向另一个名为NavigationExperimental的导航组件，该组件似乎已经解决了围绕Navigator的许多问题。使用这种组件名称，您的CTO在审查您的下一个请求时会说什么？使用React Native之前要问的问题您的用户是否希望该应用程序反映其移动操作系统的独特设计准则（例如，人机界面准则，材料设计）？ […]

我与React-Native关系的3个原因: 我担任iOS开发人员已有一段时间了，以前的大部分文章都涉及到iOS平台的各个方面。但是，我必须承认一些事情……我一直在与React-Native发生婚外情，甚至“更糟”的事情-我对此感到非常好。如果您不知道什么是React-Native，则应访问React-Native网站。 React Native可让您仅使用JavaScript构建移动应用程序。它使用与React相同的设计，使您可以从声明性组件组成丰富的移动UI。让我告诉您有关我与React-Native关系的三个原因。生态系统当我有机会为项目开发Web面板时，我第一次被介绍给React。看到事情如何在网络上运行并了解有关Redux之类的架构的更多信息，真是很有趣。当我发现React + Redux的知识可以轻松地通过React-Native转移到移动开发中时，我感到非常高兴。如果情况需要，这可以使您将技能应用到项目的各个部分。我并不是说您将像在特定平台上的“专家”一样有效，但是您可以肯定地帮助您的队友并为项目增加价值。反馈回路如果您是TDD / BDD的忠实拥护者，或者只是觉得需要测试编写良好的代码，那么您可能会知道，使用这种方法可以使反馈周期短是真正的好处。我喜欢我可以在每个文件保存上运行测试的事实，知道结果只需几秒钟。这使我感到自己使用的工具适合我的工作风格，并可以帮助我以自己喜欢的方式编写代码。富有成效来自一个不小的iOS项目，我习惯了很长的构建时间，事实是，有时甚至切换到测试目标都需要我重新构建项目。我参与的React / React-Native项目虽然规模不大，但是仍然…事实上，您可以看到由于热重装而立即发生的变化，而您唯一需要等待的就是Typescript编译器，这极大地提高了生产率。摘要我真的很喜欢React / React-Native适合我的工作方式的方式。这些很棒的工具肯定会帮助您完成工作。我必须说，对于RN允许您在平台之间重用大部分代码这一事实，我并没有那么炒作。当然这是一件很棒的事情，我当然不会放弃，但是我真正喜欢RN的一件事是我从中使用它构建事物以及使用开发人员创建RN附带的工具的方式获得乐趣。心里。这并不是要把一切都留给React-Native。学习任何新的框架或语言将有助于您了解自己喜欢的内容，并与各种平台上使用的模式取得联系。也许它将激发您找到改善其他项目工作流程的新方法。不要将您的心爱的语言或框架附加到自己的头上，并时不时尝试其他方法-作为开发人员，它肯定会使您受益。您可以在 www.eliaszsawicki.com的博客上找到更多我的帖子。