Tag: reactjs

反应本机推送通知: 使用Amazon Pinpoint，AWS Amplify和AWS Mobile Hub将推送通知添加到React Native iOS项目中。 AWS最近增加了将推送通知发送到AWS Amplify库的功能，从而可以与适用于iOS和Android平台的Amazon Pinpoint推送通知服务集成。这增加了Amplify支持的现有服务，该服务现在还包括使用Amazon Cognito进行授权，使用Amazon S3进行存储以及使用Amazon Pinpoint进行分析。在本文中，我们将逐步介绍如何向React Native iOS项目添加推送通知。我们将不介绍Android，它将在另一篇文章中介绍，因为这两个平台是如此不同，并且具有完全不同的配置和工作流程。要查看完整的端到端实施，包括配置Apple证书和配置文件，请参阅以下视频。现在，您会注意到项目中添加了几个新文件和文件夹： ./aws-exports.js – ./awsmobilejs和./awsmobilejs 。在通过CLI创建Mobile Hub项目之后，应在终端中向您介绍./awsmobilejs的内容： ./aws-exports.js包含与AWS Amplify支持的任何AWS服务进行交互所需的配置。我们在调用Amplify.configure(config)时使用此文件来配置应用程序，其中config是此配置。接下来，我们需要在AWS Amplify React Native项目中链接本机依赖关系：反应本机链接aws放大反应本机苹果开发人员配置接下来，我们需要在开发人员控制台中设置iOS推送通知，创建配置文件，并从Keychain Access生成并下载.p12文件。执行此操作的步骤位于此处。如果您以前从未做过，那么这是一个复杂的过程，我会在这里指出您之前引用的视频，并从4:42到12:30观看整个过程。将.p12文件添加到Amazon Pinpoint 现在我们已经配置了Apple证书，我们需要通过Mobile Hub将.p12文件上传到Amazon Pinpoint。让我们从控制台在Mobile Hub中打开项目： awsmobile控制台这将在AWS控制台中打开当前的AWS Mobile Hub项目。向下滚动并单击Messaging＆Analytics ，然后选择Messaging ：现在，选择Mobile Push […]

快速反应本机：立即开始使用JavaScript学习本机iOS开发！: 本书是关于React Native进行移动iOS开发入门的指南。您可以在https://github.com/azat-co/react-native-quickly中找到源代码和手稿。您可以在此处或在reactnativequickly.com上在线阅读本书，或者，如果您喜欢视频，可以在Node.University上观看项目视频：http：//node.university/courses/react-native-quickly。在本书中，我将向您介绍React Native，以进行本机移动iOS和Android开发……并迅速进行。我们将讨论诸如为什么React Native很棒为iOS设置React Native Development Hello World和React Native CLI 样式和Flexbox React Native UI的主要组件将模块导入Xcode项目项目：计时器项目：天气应用这本书是关于快速开始使用React的，而不是关于React Native的，从技术上讲，它是一个单独的库（有些甚至可以称为框架）。但是我认为在与React一起进行Web开发的八章工作之后，通过利用这个很棒的库将我们的知识应用于移动开发会很有趣。您会惊讶于您已经从React中学到了多少React Native技能。使示例过于复杂或过于简单，从而使它们不现实且无用，总是存在一个平衡。在本书中，准备构建两个移动应用程序：Timer和Weather应用程序。 Weather应用程序具有3个屏幕录像，您可以在Node.Unversity上观看。他们将引导您完成“天气”应用程序。 [边注] 阅读博客文章固然不错，但观看视频课程则更好，因为它们更具吸引力。许多开发人员抱怨Node上缺乏负担得起的高质量视频材料。观看YouTube视频让人分心，疯狂地花500美元购买Node视频课程！去看看Node University，它在Node：node.university上有免费的视频课程。 [旁注结尾] 项目的源代码（以及提交问题/错误的手稿）在https://github.com/azat-co/react-native-quickly存储库中。请享用！为什么React Native很棒 React Native应用程序不同于混合应用程序或所谓的HTML5应用程序。如果您不熟悉混合方法，那就是将网站包装在无头浏览器中的时候。无头浏览器是没有URL栏或导航按钮的浏览器视图。基本上，开发人员使用常规的网络技术（例如JavaScript，HTML和CSS）以及可能的框架（例如jQuery Mobile，Ionic，Ember或Backbone）来构建响应式网站。然后，他们将其与该无头浏览器一起打包为本地应用程序。最后，您可以跨平台重用相同的代码库，但是通常缺乏使用混合应用程序的经验。与本机应用程序相比，它们通常不那么敏捷，或者缺少某些功能。混合应用程序最受欢迎的框架包括Sencha […]

Android vİOS’a SqlLite PlugininiTanıtmave React Native ileİlkSqlLite Denemeyimi: Merhaba sevgiliyazılımaşıkları，反应本机 ile uygulamageliştirirken 数据 üzerindekiişlemlerimizi服务员aracılıylasunucularüzerindegerçekleştireceğiz。 Sadece local’deçalışanuygulamalargünümüzdeyok denecek kadar az.Uygulamalar dataişimlerinisunucuüzerindeyapıyorlar。 Bizde ileri tarihli React Nativeyazılarımızdayapacağımızörnekuygulamalarıbumantıkdageliştirmeyeçalışacağız。 Geliştirmeyeçalışacağızdiyorum。 Çünkücihazüzerindemutlaka本地数据tutmamızgerekecek。 Böylebir durumda SqlLite birseçenekolabilir。 Siz altarnetif bir插入de kullanabilirsiniz。 SqlLiteyazısınıniki anaamacıolacak。 Birincisi： react-native-sqlite-storage 插件Andorid ve Ioscihazlarıiçinçalışırhale getirmek。 Bumantığıanladığımızdadiğerpluginlerikullanırkensıkıntıyaşamayızdiyedüşünüyorum。饮食信息： Cihazüzerinde本地数据tutmakiçinyazmamızgereken SQLkodlarınımetotlararacılıylaçağırmamızısağlamak。不说SQL的原因是什么，请执行以下操作。佩尔·阿科尔德·奥尔马迪·阿玛·伊勒莱恩·博尔德·达哈·阿奇尔·比尔·塞克尔德·inceleyeceğiz。 SqlLite konusunabaşlamadanönce反应本机projesioluşturmamızgerekiyor。 Bununiçinreact-native init projeismi komutunu终端üzerindençalıştırmamızgerekiyor。响应React Native 01和响应React Native 02yazılarımıinceleyebilirsiniz。 YadaAşağıyaeklediğimReact原生projesinin […]

搬上海: MOVE Shanghai可以让您从一个地方访问该地区所有高级健身场所。有了它的帮助，您可以预订各种活动，例如游泳，瑜伽，舞蹈课等等。无论您喜欢哪种生态系统，MOVE Shanghai均可在iOS，Android和Web上使用，旨在提供相同的体验。在本文中，我们将与您分享在实施过程中面临的挑战以及我们如何解决这些挑战。挑战 MOVE上海项目的工作包括许多挑战。最初，任务是克隆用Perl编写的现有MOVE GB应用程序。但是，对代码进行更深入的研究表明，处理另一种语言是我们最不关心的问题。事实证明，该应用程序根本不符合我们的技术堆栈。毫不奇怪，改进或以任何方式改进现有应用程序的想法被认为是一揽子案例。也就是说，我们得出的结论是，完全从头开始制作应用程序将是最佳选择。当另一个不愉快的发现突然出现时，我们几乎没有开始进行移动应用程序开发。对于那些不知道的人，在中国，有一种叫做“大防火墙”的东西可以阻止任何可能有害或恶意的东西。这导致我们习惯的许多服务在大多数区域都无法访问而绝对没有问题。而且，Internet连接可能真的变慢，特别是如果您不在该国的领土范围内。毋庸置疑，包含MOVE Shanghai应用程序核心功能的通知（Twilio）和付款处理服务（Stripe / Braintree）要么几乎不可用，要么根本无法使用。因此，我们必须找到他们的替代方案。在开发应用程序时，我们从客户那里收到了新的要求。要引入的最大变化之一是与第三方服务（例如mindbodyonline.com）的应用程序集成。挑战是由于绝大多数服务是以相当复杂的方式实现的。换句话说，它们根本不是为此类操纵而设计的。解我们要做的第一件事是从Perl编写的现有应用程序中借用了一些逻辑。在将MoveShanghai与第三方服务（例如mindbody.com）集成时使用了其中的一部分。为了节省时间来解决更大的挑战，我们决定采用数据库结构，从而能够充分利用现有的应用程序。完成拆卸部分后，我们开始构建应用程序。要求之一是必须同时发布Android（适用于客户端的应用程序）和iOS版本。在找到正确的方法并解决了管理问题之后，我们的团队得以在规定的时间内交付应用程序。多亏了我们开发的统一API，无论您要使用哪种移动设备，它们都可以正常工作。说到“伟大的防火墙”，这是一个相当大的问题。作为Stripe的替代品，我们选择了Paymentwall，要研究和使用它仍然有些棘手，但仍可集成。由于Twilio在中国的运作非常不稳定，因此我们不得不寻找另一种服务来实现通知功能。为此目的最合适的选择是称为“云片”的中国服务。借助一些额外的逻辑，该应用程序现在可以通过YunPian将SMS发送到中国电话号码，而通过Twilio通知外部号码。话虽如此，让我们快速浏览一下MOVE Shanghai的移动版本的流程。登录和注册过程都非常简单。为了节省用户的时间和精力，我们通过短信实施了确认。之后，MOVE会向您显示一个屏幕，您可以在其中搜索所需的活动。该应用程序还带有非常方便且功能强大的搜索。借助其帮助，您可以按时间，日期，相关性和类型搜索活动。找到适合您的喜好和时间表的活动后，您可以立即预订。预订流程如下所示：由于该应用程序主要针对中国观众，因此客户的要求之一就是与微信进行集成。对于不熟悉这项服务的人来说，这是一个非常受欢迎的移动应用程序，可与近10亿用户（其中大部分来自中国）进行通信。在过去的几年中，微信已经从一个简单的聊天应用程序发展成为具有众多功能的整个生态系统，其中包括可以直接从该应用程序付费的功能。 MOVE Shanghai也非常适合在移动浏览器中显示（并且运行速度与本地应用程序一样快）。哦，有没有提到我们实现了美观的聊天，以便用户可以游泳/拳击/等。 […]

如何为React Native App添加自定义标签栏图标: 似乎超级容易。毕竟，我们每天都能看到它-对于React Native应用程序而言，简单的标签栏图标竟然难以实现。在尝试查找资产，对其进行编辑，然后将其供应用程序使用之间，这并不是那么容易。我没有可以在网上轻松找到的简单的端到端指南。因此，我在这里为世界和未来写这篇文章。未来乔纳森无疑将再次遇到这个问题。问题只是为了措辞：标签栏位于底部。状态栏是最上面的那个，上面写着日期，电池寿命等。导航栏是这两个之间的一个，其中包含有关屏幕内容的信息。（导航栏还包含您可能会触摸的模式屏幕等按钮） React Native和iOS为您提供了许多“系统”图标。您将从iPhone上的默认应用程序识别它们。根据文档，它们是：枚举“最高评分”）这些功能广泛，但对大多数应用程序无用。更不用说如果您在iOS系统上实现它们，则不仅会得到标准图标，而且其下方的文本也无法自定义。系统图标也很丑陋。许多应用都有自定义图标。那么我们如何为自己的应用程序实现它呢？解实现这一目标的过程分为两个部分：图标（图像）和标题（文本）。两者都需要填写。查找图标的图像非常困难。我最终使用了Canva.com的标准插图集。我创建了一个72x72px大小的设计（这是我从Apple的HIG中读取的最大允许值），然后将其拍到一个简单的图标上。我下载了带有白色背景的PNG（因为我没有付费帐户），然后在OS X上使用“预览”功能将白色拼出了透明的背景。之后，我将其放入特定的文件夹中，并要求将其放入代码中的TabBarIOS.Item中： <TabBarIOS.Item icon={require(‘./assets/chat.png’)} title=”Chat” 请注意，React Native的require适用于PNG和非JS文件。这真的不像标准的webpack（我最熟悉）的行为，所以我认为我应该在这里提一下。记下文件名。当我第一次刷新并看到图标时。真是巨大！在阅读了这个随机的Github问题后，我意识到可以通过将图标文件的名称从’chat.png’更改为’chat@3x.png’来解决此问题。这是因为72px x 72px的大小仅与视网膜文件有关。刷新，瞧！结论希望对您有帮助。我知道这将是未来的乔纳森，那笨拙而健忘的白痴。

编写一次，使用Create React（Native）App和react-native-web在任何地方运行: aka当工具存在时…组成它们！编辑2018年1月：我已经用最新版本更新了本文（没有更多的beta依赖项！）。感谢@KajiTetsushi的帮助！ 🙂 编辑2018年2月：所有版本都与React v16.2.0保持同步。（不再需要将React降级到16.0.0）自从React Native的第一个版本发布以来，我一直希望建立一个可以在任何平台上运行的React代码库。我喜欢使用Cordova和Web技术构建多平台应用程序，但是React Native现在凭借其本机性能提高了标准。到目前为止，当您想要拥有Web和Native的统一代码库时，您必须弄乱构建系统（Webpack和React Native打包器），以使所有内容协同工作。现在有了Create React Native App和Create React App，我们不必担心这一层的复杂性。我将指导您完成一个可在任何地方运行的代码库的步骤！你需要：最新版本的Node（当我写这篇文章时，它是8.6.0）创建反应应用首先，使用创建一个React应用程序： create-react-app my-hybrid-app && cd my-hybrid-app 我们需要在项目中添加一些依赖项：要安装这些软件包，可以使用 npm 或 yarn 。 npm install –save-dev babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx-source babel-preset-expo jest-expo flow-bin react-native-scripts react-test-renderer@16.2.0或yarn add –dev babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx-source babel-preset-expo jest-expo flow-bin react-native-scripts react-test-renderer@16.2.0 […]

似乎你正试图从“react-native”包中访问“ReactNative.Component”: 我正在尝试从Tyler McGinnis教程中学习反应原生： https ： //egghead.io/lessons/react-react-native-basic-ios-routing#/tab-code 下面的错误消息似乎很直接，但我不知道我在做什么错。似乎你正试图从“react-native”包中访问“ReactNative.Component”。也许你的意思是从“反应”包中访问“React.Component”。例如，而不是：从'react-native'导入React，{Component，View}; 你现在应该这样做：从'react'导入React，{Component}; 从“react-native”导入{View}; import React, { Component } from 'react'; import {AppRegistry,NavigatorIOS,StyleSheet,Text,View} from 'react-native'; import {Main} from './App/Components/Main'; var styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#111111' }, });

反应本机导航转换问题: 当我调用navigator.push（{…}）导航到不同的场景时，我有一个简单的RN应用程序，当前场景向左滑出，新场景从右侧滑入。问题是当前场景比新场景慢得多（似乎只移动了1/4的屏幕宽度），所以新场景实际上在当前场景消失之前赶上并与当前场景重叠。任何想法如何解决这个问题？ RN版本：0.34导航器（不是 NavigatorIOS）我正在模拟器中运行应用程序。提前致谢。

React Native TouchableHighlight会忽略第一个点击事件: 我正在使用TouchableHighlight来制作button，但是看起来button上的第一个单击事件不会触发TouchableHighlight元素上的onPress事件。当它再次点击时，它工作。代码如下所示： return ( <TouchableHighlight onPress={this.props.onPress} style={btnStyles} underlayColor="#a30000" activeOpacity={1}> <Text style={styles.buttonText}>{this.props.children}</Text> </TouchableHighlight> ); 这是我创build的button的链接： https ： //github.com/uiheros/react-native-redux-todo-list/blob/master/app/components/shared/Button.js 有谁知道如何修理它？或者是什么原因造成的？编辑：目前，这个问题发生在我在iOS模拟器和Android模拟器上。我还没有在真实的设备上testing过。

“未处理的JSexception：TypeError”: 我只是重置我的iPhone模拟器的设置（通过点击'重置内容和设置），现在我得到一个我从来没有过的问题。这里是：我坚持这个项目在这个重置之前完美的工作，但我需要清除应用程序的本地大气。当poeple改变index.ios.js的位置时，我确实看到了一些post，这不是我的情况。我不知道在哪里search… 这是一个简单的反应原生项目使用REDX …随意问我精度！