Tag: React

React Native-介绍未来: 几十年来，制作移动应用程序一直是最困难的事情。您必须学习各种不同的语言才能学习iOS的开发以及学习Android的另一种语言。另外，Web开发人员甚至无法触及移动应用程序的领域，因为语法和语言是如此不同。但是，星辰已经对齐，而Javascript则通过一个共同的框架将社区聚集在一起：React。 Facebook开发了一些神奇的东西。推出React Native：一个平台，可为iOS和Android进行移动开发我的React Native之旅起初，我以为我可以将我的心血，汗水和眼泪直接注入到移动应用程序中，从而移植我心爱的React应用程序。只需点击几下，我就会拥有一个功能齐全的移动应用程序。但是，我很快发现React Native的语法完全不同，一切看起来都像是外语。这是一个示例React Native应用程序的样子：我构建移动应用程序的野心很快消失了，但是我花了几个小时在附近，所以我决定尝试一下。我想知道：这些“ TouchableHighlights”和这些“视图”是什么？通过快速的Google搜索，我了解到这些只是命名按钮和div的另一种方式。在理解了基本语法之后不久，我便开始涉猎诸如页面导航之类的更难的主题。我通读了一些教程，这些教程中充满了外来代码：看起来，它就像将不同页面链接在一起的路由（类似于react router）。但是，请注意，每个路线中还传递了道具。简介：React Native可以为开发人员提供最佳的解决方案：使用单一语言移植到Android和iOS设备的灵活性 React中常用的编程能力和设计概念

React Native中的网络状态: 对于我正在开发的应用程序，我需要知道用户何时可以上网。我立即阅读了文档，并很快找到了解决方案。 React Native的API具有NetInfo ，可为您提供网络状态。 NetInfo.isConnected.fetch（）。then（（isConnected）=> { console.log（’网络状态：’+（isConnected？’online’：’offline’））; }）; 但是，这不适用于iOS（始终返回离线状态）。经过一些研究，我找到了解决此错误的方法。 NetInfo.isConnected.addEventListener（’change’，（isConnected）=> { console.log（’网络状态：’+（isConnected？’online’：’offline’））; }）这可以解决问题，但是我在控制台上收到了弃用警告，因此我决定将侦听器更改为“ connectionChange” NetInfo.isConnected.addEventListener（’connectionChange’，（isConnected）=> { console.log（’网络状态：’+（isConnected？’online’：’offline’））; }）这清除了警告，我得到了正确的结果。 React Native弃用addEventListener（更新于2018年10月2日）相反，我们将拥有appstate 。学分： – 来自Noun Project的projecthayat的网络图标

点燃！ React Native样板套件！: React native是一个很棒的工具，但是使用React-Native开始一个新项目根本就不那么出色。考虑所有需要安装的工具可能会让您头疼。典型的最佳实践RN应用程序包括redux ， react-navigation ， r18n 。还有一些更专业的库，例如redux-saga 。首先，您必须安装它们并使它们协同工作。这需要时间并且需要努力。如果您对此感到厌烦，请见面，点燃！如上所述，根据您要启动的项目，开始一个新项目可能要花费一些时间。如果我告诉您可以将其减少到几分钟并将剩余的时间用于实际编码，该怎么办。它比您想象的要简单。让我解释一下该hack会被点燃，它实际上是做什么的？ Ignite是React Native的生成器，带有样板，插件等。 Ignite团队已发布了第二个版本，称为Ignite CLI 。在第一个版本中，您可以选择一个-Infinite Red的样板-现在，您可以从许多样板中进行选择，还可以根据需要添加独立的插件。让我们使用Ignite进行第一个React-native应用程序。 Ignite有一个非常简单的CLI，但是首先我们必须安装它。只需在您的终端中输入即可。 npm install -g ignite-cli 提醒：Ignite CLI必需的纱线已安装在系统上。安装ignite之后，我们可以创建第一个应用程序。 ignite new MyNewAppName 在创建过程中它将询问您一些问题。您可以选择是否要安装它们。等待几分钟，然后您应该会看到类似这样的信息 ———————————————- （）（）\）（（/（）\）*）（（）/（）\））（（））（（）/（`）/（（ /（_））（（）/（（（（_）\ /（_））（）（_）））\ （_））/（__））_ __（（_）（_））（_（_（））（（_） | _ _ | （_））__ | […]

如何在本机项目中使用矢量图标: 是否想在反应项目中使用矢量图标？有一个适合您的项目：react-native-vector-icons。这个项目很棒，但是如果您不熟悉xcode，那么它的文档将有些棘手且不直观。安装方式 $＃在您的本机项目中： $ npm install react-native-vector-icons —保存如何在Xcode中将自定义字体添加到React Native应用程序：在您的Xcode项目中创建一个新的字体组。注意：您不能只创建一个普通的文件夹。您可以通过颜色区分一个文件夹是普通文件夹还是xcode组（蓝色表示普通文件夹，黄色表示组） 2.将要在项目中使用的字体文件（./node_modules/react-native-vector-icons/Fonts/*.ttf）拖到刚创建的Fonts组中。 3.展开项目主目录内的项目名称文件夹，然后编辑Info.plist。 4.添加应用程序提供的字体作为新键 5.运行Shift + Command + K清理上一个版本 6. Command + B开始新的构建 7.最后用Command + R运行应用程序如果仍然看到错误“无法识别的字体系列”，请重新启动React Packager。现在，您应该转到react-native-vector-icons并详细了解如何使用它。

React Native：刷卡，文本输入，动画和手势响应器: 这周，我对React Native进行了第一次“认真”的尝试，发现一些令人惊讶的令人讨厌的东西，而文献记载却很少。我希望这对其他人（或有更好解决方案的人）有所帮助。让我们从刷卡开始作为非iOS开发人员，我实际上不知道该模式的正确名称，Apple却喜欢将其命名为UITableViewRowAction。不幸的是，React Native没有包含如此出色的现成解决方案。由于缺少正式的解决方案，我跳到coach.js上，找到了希望有人已经编写的组件。我选择与react-native-swipeout一起使用。这是一个非常不错的图书馆简单图书馆，我或多或少开箱即用。（注意：NPM版本已经严重过时，我最初只是使用NPM，但没有，只是使用了仓库）从那以后，我就将它分叉了，用React Native LayoutAnimations替换了动画以减少依赖性（并且我想它会更高效），并且使手势处理对用户来说更加直观。布局动画 LayoutAnimations是一个非常酷的库，它使您可以轻松地创建动画，并且或多或少都有文档记录。您可以像这样创建漂亮的动画： LayoutAnimation.easeInEaseOut（）; this.setState（{elementHeight：1}）; //确保它不为0！ //设置元素的高度取决于this.state.elementHeight，我们都很好但是请稍等，如果我将elementHeight设置为0会怎样？看来React决定进行优化并完全删除元素而没有任何动画！但是，如果我想完全隐藏该元素怎么办？ hacky修复实际上还不错。（您可以在GIF中看到它的实际效果）。 LayoutAnimation.easeInEaseOut（（）=> { //完成动画后，将高度设置为0 this.setState（{elementHeight：0}）; }）; this.setState（{elementHeight：1}）; 只需将动画设置为1px，然后在动画结束后将高度设置为0，使其消失即可。这样，动画仍然可以正常工作，最后元素仍然可以完全消失。 TextInputs +滑动和手势响应器！现在，我认为这是困难的部分。该应用程序的部分需求当然是即使您在TextInput顶部开始滑动，也能够滑动出删除按钮。默认情况下，如果点按了TextInput，它将“窃取”并“锁定”该手势至其自身，拒绝将其放弃给其他任何人。如果您要在Swipeout中嵌套TextInput并期望Swipeout处理滑动，则这是个坏消息。根本原因是什么？这条线在这里。那条线到底是做什么的？好吧，这变得有些困难。 React Native中的大多数手势都建立在Gesture Responder系统之上。当手势开始时，因此当您的手指第一次与屏幕接触时，它将找到“最深”元素，并询问是否要处理手势（使用onStartShouldSetResponder）。 TextInput总是要求处理输入（禁用时除外），就在用户第一次进行联系时（不知道此点击是否会变成滑动）。现在，当用户开始拖动手指，并且手势响应器现在意识到这是“移动” /滑动时，它将再次询问元素是否要处理移动手势。现在的问题是Swipeout想要处理移动手势，但是当Swipeout要求处理它时，手势响应器会询问TextInput（通过onResponderTerminationRequest）是否可以放弃对手势的控制。由于某种原因，TextInput被编码为始终拒绝请求，因此我的Swipeout将永远无法处理TextInput内的手势。手势响应器文档中的生命周期段落在手势操作中如何调用不同功能方面也非常全面。同样的想法也适用于PanResponder（高级手势响应系统），如果您使用PanResponder，请参考GestureResponder的生命周期，因为它的本质是相同的。 […]

React Native –这里您需要知道的一切: React Native是一个JavaScript框架，用于为iOS和Android编写真实的，本地渲染的移动应用程序.React Native还公开了平台API的JavaScript接口，因此您的React Native应用程序可以访问平台功能，例如电话摄像头或用户的位置。 React native是移动应用开发行业中的著名技术 REACT Native仅借助JavaScript即可帮助您创建真实而令人兴奋的移动应用程序，而android和iOS平台均支持JavaScript。只需编写一次代码，即可在iOS和Android平台上使用REACT Native应用程序，这有助于节省开发时间。 REACT Native受到了广泛的欢迎，并且得到了Facebook的支持，REACT Native如今已获得了巨大的社区支持。 React Native建立在ReactJS的基础上，ReactJS为长期以来的最爱AngularJS带来了巨大的竞争。尽管ReactJS和React Native之间有一些相似之处和不同之处，但下面会提到： React Native是一个框架，可构建UI组件的层次结构来构建JavaScript代码。它具有适用于iOS和Android平台的一组组件，以构建具有本机外观的移动应用程序。另一方面，ReactJS是用于创建用户界面的开源JavaScript库。但是，除了设计接口以外，React Native和ReactJS都是由Facebook使用相同的设计原则开发的。由于它使用相同的代码来创建REACT Native iOS或REACT Native Android应用程序和Web应用程序，因此您只需要了解HTML，CSS和JavaScript。让我们在这里看看REACT Native Framework的重要性！为什么REACT本机框架很重要？借助React Native Framework，您可以为iOS和Android平台呈现UI。它是一个开放源代码框架，在不久的将来可以与其他平台兼容，例如Windows或tvOS。由于React Native组件具有相应的权利，因此您可以重复使用这些组件来构建Android和iOS应用程序。您可以将REACT Native组件合并到现有应用程序的代码中，也可以在插件的帮助下重用基于Cordova的代码。但是，您现有的应用必须使用Cordova和Ionic代码构建。 React Native开发相对简单，快速且高效。对于那些具有JavaScript专业知识的开发人员来说，REACT Native是一个不错的选择，因为无需学习特定于Android的Java或iOS的Swift。 React Native是针对UI的，它可以使应用程序快速加载并提供更流畅的感觉。 REACT Native框架近年来得到普及的另一个原因是，该框架可同时满足两个平台的需求，并结束了为移动开发人员选择iOS或Android开发的圣战。因此，Facebook，Instagram，Skype，Airbnb，Tesla，沃尔玛，百度移动，彭博社，UberEATS Vogue等巨型公司已经将目光投向了它。此外，使用React Native Framework填补了在关注广阔市场和获利之间的空白。由于与Android用户相比，iOS用户数量较少，但却产生了更多利润，因此许多行业陷入了困境，他们是应该强调通过构建iOS应用来获得更多利润，还是仅通过Android应用来增强用户实力。 […]

Redux —我如何理解？: 初次见到Redux时，乍一看似乎有些令人不知所措。但是，如果您想有效地使用Redux，则必须了解它的工作原理以及其核心要素。状态…动作…减速器…存储…在今天的帖子中，我想向您介绍Redux，以便您可以了解其工作原理。什么是Redux？如果您完全不熟悉Redux，则可能需要先检查Redux文档。 Redux是JavaScript应用程序的可预测状态容器。它可以帮助您编写性能一致，在不同环境（客户端，服务器和本机）中运行且易于测试的应用程序。最重要的是，它提供了出色的开发人员体验，例如实时代码编辑和时间旅行调试器的结合。请记住，您无需成为Web开发人员即可在您的应用程序中使用类似Redux的架构。在各种平台上都有很多这样的想法，ReSwift就是其中之一。档案（州）如果我问您，应用程序中的状态是什么样的，那么很难立即解释它。一些值存储在视图模型中，有些存储库也存储一些值……哦！那里的类知道当前正在登录的用户。但是，如果在这样的问题之后我们可以立即显示应用程序的状态呢？对我们来说，以这种方式订购的应用程序难道不是很容易吗？在这种情况下，Redux会为我们提供解决方案。想象一下，您的状态就像存档，您完全知道在哪里寻找事物，并将其存储在一个结构中。当然，具有较大的结构并不表示将是一团糟。您可以将状态存储在归档抽屉中，这些抽屉将代表登录屏幕，设置屏幕等的状态。字母（动作）所以……现在我们的档案中有一个整齐的结构化状态，所有内容都很干净，并且易于推理。但是，正如您可能期望的那样，我们的用户很有可能希望以某种方式更改此状态（我想这并不是什么新鲜事物）。我们该如何处理？好吧，我们不能直接访问我们的应用程序状态并更改我们想要的内容。那不是您使用干净存档的方式……让我们想象一下我想更改我的地址。我不能只是走进市政厅去玩他们的档案。我需要写一个正式的字母。标题：约翰·多伊（John Doe）—地址更改您好，我刚搬到另一所房子。我目前的地址是Art Street 10。不用担心，当我们更改应用程序的状态时，我们只需要关键信息。因此可能看起来像这样：但是，有时我们无法立即准备此类信件，因为我们还没有所有必需的数据。当我需要执行http请求时，我还不知道响应。对于这种情况，我们必须聘请会计师。他们将完成所有工作，然后代表我们发送一封信。例如，在收到服务器的响应后，他们将在信中填写所需的信息并将其发送给我们。信准备好后，您必须将其发送到市政厅。有很多人在这里工作，照顾各种事情。有些人处理您的地址信息，有些人处理您的汽车登记等……他们用您来信中的数据更新档案后，他们会通知您，以便您例如可以更新待办事项列表并划掉“更改地址” …或更新您的Facebook状态。应用程序内部的reducers也是如此。如果创建了新状态，则将通知所有对此更新感兴趣的地方。市政厅员工（减速机）正如我说的那样，在市政厅里，有很多人在照顾各种事情。这些是我们应用中的减速器。想象一下，在收到我们的信之后，该信将交给cityHallDirector，后者将其呈现给该市政厅中的每个工人。他们中的一些人会看一下它，而只是忽略它，因为他们看到他们不熟悉该标题。但是到某个时候，会有人说：“哦！我负责地址更改，我必须处理！”。请记住，要求市政厅工作人员进行任何更改的唯一方法是给他们这样的信件。 “……”是点差运算符。 […]

Swift-ier Redux实施-第一部分: 这是一系列中级帖子的第一个。第二部分即将推出。如果您是忙碌的开发人员，请随时跳过本文，直接转到代码： https : //github.com/wircho/Swux React + Redux组合提供了一个非常强大的Web反应模型，隐藏了反应体系结构令人困惑的一面，并提供了可读且具有同步外观的应用程序代码。下图概括了Redux背后的范式，即单向数据流。商店实体独自负责使用一种称为reducer的函数来改变和提供应用程序状态（该值包含在任何时间点唯一确定应用程序UI所需的所有信息），并且该函数具有旧状态和一个action ，以及返回新状态。该应用可能会调度（提交）商店排队的动作以连续改变应用状态并通知订户。订阅者收到新状态后，必须使用它来更新应用程序的UI。当我进行移动开发时，有时会想念这种范例的简单性，因为大型项目有时会变成反应性元素，回调和委托的混杂体。因此，我最近决定探索ReSwift，并确定它在Swift中是否与原始JavaScript工具一样好。在大多数情况下是这样，但不难看出它怎么可能更快。一个示例是reducer函数的签名（从此处开始）：（_动作：动作，_状态：状态？）-> 状态在Swift中，该签名可以做成：（_动作：动作，_状态：进入状态？）-> 无效实际上，虽然第一种形式迫使您创建状态的副本或全新状态，但是第二种形式使您可以更改状态，从而在更少的行中编写更具可读性的代码。由于Swift的写时复制值类型和专有所有权功能，该代码还可以更快地运行并且使用更少的内存。我也不喜欢这种类型转换（来自ReSwift的README.md）的switch语句，它的形式是从JavaScript借来的： func reducer （操作：操作，状态： AppState吗？）-> AppState { var state =状态?? AppState （）切换动作{ 案例_作为CounterActionIncrease ： […]

我见过天堂。它是用JavaScript编写的。: 为什么React Native是未来我有一种怪异的软件描述方式。而且您要么知道我的意思，要么您不知道。有点奇怪，但是软件界面感觉很重。使用界面时，它可能会感到沉重，或者感觉到光线较轻。两者都不比另一个更好。这只是取决于。铬很轻。 Safari感觉较重。 Firefox感觉最重。可能是胡说八道，但这就是我的感觉。在我的软件开发生涯中，最重的感觉之一就是在Xcode中使用Swift。哦，好痛。延时。 Kanye-West编译器永远不会让您完成。过去几年，我一直生活在这个笨拙的世界中，以我所知道的唯一方式来构建应用程序：原始，手动，单平台代码。本地化！对？当我了解React Native时，我感到怀疑。一次用JavaScript编写代码，然后在iOS和Android上部署本机应用程序？ -这很烂。所以我忽略了它。相反，最终写了两个单独的本机应用程序，一个在iOS的Swift中，另一个在Java / Kotlin的Android中。这是用JavaScript编写的Web应用程序和基于Electron的桌面应用程序的补充。（该应用程序是一个加密的跨平台笔记应用程序，因此每个平台上的可用性都是关键。）这在一段时间内效果很好，但是有困难。我可以编写Web应用程序和iOS应用程序，但是我对Android毫无经验。实际上，我一生中从未使用过Android设备超过一个小时。幸运的是，社区贡献者很乐于帮助构建基础知识，这使我放弃了从头开始编写应用程序的工作，而只是通过增量更改来维护它。每当需要进行更改或添加功能时，我就需要进入三种不同的代码库，并用三种不同的语言编写相同的代码。作为一个人，这并不总是很有效。即使是最简单的跨平台更改，也可能需要一周的时间。结果是应用程序永远无法拥有美好的事物。例如，几个用户要求向应用程序添加密码和指纹锁定的功能，这是对具有安全意识的Notes应用程序的非常合理的要求。但这的实现并非易事：首先，除了输入接口外，还需要密码设置接口。然后，使用密码对离线用户数据进行加密。然后，在移动设备上，指定何时应要求输入密码或指纹（立即或退出应用程序时）。用Swift编写所有这些代码，然后是Java，然后是JavaScript的想法是一场噩梦。我无法自己去做。一定有更好的方法。输入React Native 我必须描述为应用程序维护单独的代码库后的上下文和情感，以便您了解当我开始使用React Native时的愉悦感。在用Atom （！）编写本机应用程序的第一周，我不屑一顾。我简直不敢相信这是多么容易。没有Xcode，没有Swift，可以立即重新加载更改，使用易于使用的JavaScript编写代码-我当时就在天堂。在编写代码时，我会并排放置iOS模拟器和Android模拟器，并花了一半的时间完全无法相信一切正常。我从来没有想过， […]

技术堆栈摘要3：2017年4月: 四月是一个繁忙的月份！有太多很棒的技术堆栈帖子，以至于我们很难挑选十个。到4月为止，我们总共有20个热门帖子，其中包括10个隐藏的宝石💎。来自Netflix ， Flipboard ， Slack ， Twitter ， Yelp ， Dropbox ， LinkedIn，Shopify等的帖子。令人惊讶的是，四月份的一个主要主题是移动开发。 LinkedIn，Yelp和Uber都写了关于Android的用法，而Uber则用Swift分解了对应用程序的重写，Shopify则写了关于构建移动CI系统的文章。查看以前版本的Tech Stack综述十大技术栈文章：我们如何构建Twitter Lite（Twitter）如果您还没有听说过，那么Twitter Lite是一种“快速且响应迅速，使用较少数据，占用较少存储空间，并支持推送通知和在现代浏览器中脱机使用的功能”，旨在成为您在使用Twitter时使用Twitter的最佳方式。连接速度慢，不可靠，受限或昂贵。基本上，是精简版的Twitter。 Twitter将其构建为客户端JS应用程序，并使用React，Redux，Normalizr，Globalize，Babel，Webpack，Jest，WebdriverIO和Yarn构建。作者：尼古拉斯·加拉格尔（Nicolas Gallagher）技术堆栈： React ， Redux ， Normalizr ， Globalize ， Babel ， Webpack ， Jest ， WebdriverIO和Yarn Slack的TypeScript（Slack）有人在打字TypeScript …事实证明，您一直使用的Slack桌面应用程序非常复杂。这是一个多线程应用程序，使用JavaScript与Windows，macOS和Linux的本机代码进行交互。 Slack希望能够保证一切都能融合在一起，因此他们转向TypeScript […]