Tag: react native

在React Native中处理来自OneSignal的远程推送通知

两周前，我发表了一篇文章，介绍了通过OneSignal为React Native（iOS和Android）设置推送通知所必须采取的每个步骤。 但是帖子在交付时就停止了-如果您想在用户通过推送通知打开应用程序时为他们做些什么呢？ 如果他们在应用程序中打开了推送通知怎么办？ 这就是我今天打算讲的内容。 在继续本文之前，请确保已为您的平台设置了OneSignal。 访问通知 在我们实际上无法对通知执行任何操作之前，我们需要访问该通知的内容。 使用react-native-onesignal时 我们将利用已打开的事件，我们可以使用OneSignal.addEventListener进行监听 。 确保您也删除了监听器！ 现在，我们对数据的外观有了一个了解。 让我们写一些代码。 我们将使用react-native-root-toast 在应用中显示通知。 这是计划： 不活跃的经历 那么，如果用户在我们的应用程序处于后台时单击通知，该怎么办？ 我将继续进行，好像我们使用的是react-native-router-flux （我有一个有关如何使用它的教程） 。 因此，回顾我们的规范，我们知道在这种情况下，我们不会向用户显示消息（他们已经从通知中看到了该消息），但是我们确实希望将它们带到适当的房间。 您会看到，访问我们从推送通知传递的自定义数据非常简单，从而为用户提供自定义体验并节省时间。

我们时代的问题

“ 我想启动一个网站及其移动伴侣应用程序。 该应用程序将在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 […]

如何用Jest编写单元测试：具有不同数据的相同测试套件

对于我们的React Native iOS应用，我们选择Jest进行测试。 原因很简单：它是由Facebook正式开发的（当时得到了全面支持和普遍使用。） 幸运的是，我发现Jest和Spock是我熟悉的另一个测试框架之间的相似之处。 两者都可以保持简明扼要的复制相同测试套件和不同数据的方式。 我们可以像这样在测试文件中写下数据表： 参考文献 入门·开玩笑 使用以下命令安装Jest：yarn add –dev jest npm install –save-dev jest让我们开始写一个测试…… jestjs.io 全球人物·开玩笑 在您的测试文件中，Jest将所有这些方法和对象放入全局环境中。 您不必要求…… jestjs.io 在Jest中组织测试 如果您还没有尝试过Jest，则应该这样做。 即使您不使用React。 它简直死了，并加载了… medium.com

介绍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 的开发人员倡导者， 负责 […]

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 […]

React Native ile Firebase推送通知

Merhabalar，Bu benim ilkyazımdır。 ylkınıngünahıolmaz diyerekbaşlayalım。 İyiokumalar🙂 否：BukısımdaFirebase IOS推送通知 anlatılmıştır。 Androidkısmınıbir sonrakiyazımdaanlatacağım。 https://console.firebase.google.com/ giderekönceliklebir tane projeoluşturuyoruz。 Açılanekranda projeadıalanınaistediğinizgibi isim verebilirsiniz。 Türkçekullanıyorsanız“Mükemmelprojem” yazanalanıgöreceksiniz。 Projeadınıbelirledikten sonra altta bulunan denetleyici喀布尔edip Projeoluşturatıklamanızgerekmektedir。 Daha颂歌aşağıdakisayfa ilekarşılaşacaksınız。 Bu alandan IOS和Androidiçinuygulamaekleyeceğiz。 ÖnceliğimiziIOS’dan yana kullanarak IOS’atıklıyoruz。 Açılanekrandan IOS程序包kimliğialanınıdolduruyoruz。 （Bu alan appStore de bulunanuygulamanızınID’sidir。） Xcode’unuzu的广告。在Google的GoogleService-Info.plist上，您可以轻松地在Firebase中下载内容。 $ sudo gem install cocoapods 达哈·索纳·拉杰里·阿扎拉克·普罗涅尼津·布隆杜格·迪吉内·吉迪普（ios dizinialtındaolduğunuzdanemin olun）。 $ pod init […]

在Xcode中为React Native应用程序创建启动屏幕

如果您正在开发一个很棒的React Native应用程序，那么我想您应该完全按照自己的设计进行外观设计。 好吧，启动屏幕是用户首先看到的。 初看起来一定是最好的！ 因此，让我们在Xcode中为您的React Native创建一个初始屏幕，这样您的用户就不会看到React Native在iOS默认显示的丑陋默认屏幕。 在Xcode中打开您的项目。 在左侧边栏上，单击文件夹图标。 打开下拉菜单 打开第一个文件夹 单击文件LaunchScreen.xib 有默认的启动屏幕。 在这里，您可以编辑文本，更改颜色，添加图像等等。 我不会教您如何创建漂亮的启动屏幕，但这是您发挥自己想象力的地方！ 期待您将制作出所有出色的启动屏幕😀 如果您不喜欢我的文字和图像，还喜欢视频吗？ 请查看这篇文章：http://reactcafe.com/how-to-remove-the-powered-by-react-native-message-in-ios/

将AWS AppSync与React-Native-Navigation集成

如果您使用的是来自Wix的React-Native-Navigation库，请使用分步方法将AWS AppSync与React-Native App连接。 本教程可以用作设置React-native iOS应用程序的指南，该应用程序使用React-Native-Navigation库进行导航，并使用AWS AppSync处理基于云的数据。 首先，设置存储库。 在本教程中，我将使用gitHub，您将在本文结尾处找到该仓库的链接。 react-native初始化yourAppName 请访问官方文档以遵循此安装步骤。 容易跟随截图！ https://wix.github.io/react-native-navigation/#/installation-ios 返回官方文档并按照使用步骤进行操作：https://wix.github.io/react-native-navigation/#/usage。 您需要根据wix的上述说明创建一些屏幕； 我坚持使用名字FirstTabScreen，SecondTabScreen和PushedScreen与文档中的示例代码保持一致。 现在，每个屏幕都可以具有基本结构（请参见下文），同时我们确保react-native-navigation正常运行。 在应用程序根目录下的index.js文件中，您会注意到Navigation.startTabBasedApp函数的tabs:数组中每个对象的icon:和selectedIcon:属性； 您可以在此处提供应用程序导航选项卡中显示的所有图标图像的路径。 就本教程而言，我将注释掉这些属性，以免在启动应用程序时出现任何错误。 从’react’导入React，{Component} 从’react-native’导入{Text，View} Class FirstTabScreen扩展了Component { render（）{ 返回（ 这是您的第一个选项卡屏幕 ） } } 导出默认的FirstTabScreen 按照wix的上述说明并为每个屏幕创建三个简单的组件之后，我们可以转到终端并首次启动我们的应用程序： 反应本机运行iOS 成功！ 现在，我们可以进行本机导航！ 首次启动控制台时，您会看到一个橙色的“创建API”按钮， 如果这是您第一次使用GraphQL（对我而言），那么“入门”窗口中提供的“架构参考”将为您提供丰富的信息，并且易于遵循。 为了全面了解GraphQL，没有像官方文档这样的地方：http://graphql.org/learn/。 有关AppSync团队创建的其他GraphQL和AppSync资源，请参阅本文结尾。 就本教程而言，我们将使用在模式编辑器中注释掉的示例模式，并对查询类型进行一些修改。 使用左侧的导航菜单，然后单击“架构”以进入编辑器。 执行以下操作以完成您的架构的设置： 成功保存架构后，将在右侧“数据类型”窗口上方启用白色的“创建资源”按钮。 单击它以自动为Schema中的数据类型置备AWS DynamoDB表。 在这种情况下，我们只有一种名为“ Post”的数据类型： AppSync完成设置资源后，现在将在“查询”和“突变”的解析器字段中填充表名称。 您会注意到，尚未自动为“ putPost”突变和“ allPost”查询分配解析器。 我将逐步介绍如何手动设置解析器，首先我们从“ putPost”开始： 接下来，我们将为allPost设置解析器： 简单！ […]

React Native iOS 9或更高版本中的通用链接

如果应用程序已安装在设备中，则打开一个指向应用程序的https：//链接；如果未将应用程序安装在设备中，则继续在safari中打开。 每当用户简单地点击链接时，React Native iOS中的通用链接将重定向到已安装的应用程序，而无需在野生动物园中加载链接。 如何在iOS 9或更高版本中设置通用链接？ 步骤1 ：确保您的服务器在HTTPS上运行，因为apple-app-site-association文件将仅通过HTTPS提供 第2步：创建不含.json的 apple-app-site-association JSON文件，并使用以下内容进行更新– 请确保AASA文件： 通过HTTPS提供。 使用application / json MIME类型。 不要附加 .json 大小不超过128 Kb（iOS 9.3.1及更高版本中的要求）。 必须在apple-app-site-association中添加活动继续 { “ activitycontinuation”：{ “应用”： [ “ 。” ] }， “应用链接”：{ “应用”： []， “细节”： [{ “ appID”：“ 。”， “路径”：[“ ”] }] } }例：{ “ activitycontinuation”：{ “应用”： [ “ MJ19050596.com.apple.app” ] }， “应用链接”：{ “应用”： […]

使用React Native和MapBox的逐行导航

我搜索了React Native的转弯导航，我能得到的最好的是：https://github.com/flyandi/react-native-maps-navigation。 我会说这是一个好的开始。 但是作者说： 请注意，此模块可用，但仍在大量开发中。 某些属性和/或组件名称可能会更改，恕不另行通知。 我不是一直都在更改代码，所以我决定采用更稳定/经过测试的解决方案。 即：MapBox 本教程的实施非常简单，只要您按照以下步骤操作，就应该能够进行逐步导航。 PS：我得到的反馈是，如果您已经在使用Mapbox React Native库，则以下步骤将不起作用。 如果您有解决方法，请告诉我，以便我可以链接到您的文章/库… 为了简短起见，我将跳过这一部分，我假设任何尝试实现这种高级功能的人都可以使用Google“ Setup React Native”。 设置好环境后，我们需要创建我们的项目（我的第一个项目）并导入必要的Pod： 反应性初始TbtNavigation cd TbtNavigation npm install-保存 cd ios / 荚初始化 执行Pod初始化将为您创建一个Podfile，您可以使用自己喜欢的文本编辑器编辑此文件以添加必要的Pod。 如果您不喜欢cocoapods，则必须先进行设置。 您可以在这里找到操作方法。 打开您的Podfile并添加以下行： pod’MapboxNavigation’，’〜> 0.22.0′ 您的文件现在应如下所示： ＃取消注释下一行以定义项目的全局平台 ＃platform：ios，’9.0′ 目标’TbtNavigation’做 ＃如果您不使用Swift并且不想使用动态框架，请注释下一行 use_frameworks！＃TbtNavigation的窗格 pod’MapboxNavigation’，’〜> 0.22.0’target’TbtNavigationTests’做 继承！ ：search_paths ＃测试豆荚 endendtarget’TbtNavigation-tvOS’做 ＃如果您使用的是Swift或想使用动态框架，请取消注释下一行 ＃use_frameworks！＃TbtNavigation-tvOStarget’TbtNavigation-tvOSTests’的容器 继承！ ：search_paths ＃测试豆荚 结束＃ 确保use_frameworks！ 行未注释掉，然后运行： 吊舱安装 这将设置您并确保您拥有此示例所需的一切。 […]