Tag: react native

使用iOS的React Native SalesforceMobleSDK项目启动并运行

这篇文章的目的是向您展示使用React Native SalesforceMobleSDK for iOS来启动和运行的简单方法。 简而言之，我们要做四件事： 安装依赖项 在Salesforce中创建连接的应用程序 克隆项目模板 验证项目在本地运行 如果您打算构建和发布应用，则还有更多步骤，但是这篇文章的目的是让您起步并被黑客入侵！ 我们需要做的第一件事是确保您已安装所有依赖项，如果您未在此处找到安装指南的链接： node ://nodejs.org/en/ xCode -https://developer.apple.com/xcode/ CocoaPods — sudo gem install cocoapods -v 1.4 注意如果您有更高版本的cocoapods，则会收到如下错误： 安装的Pod版本（1.5.3）超过了受支持的最大版本（1.4）。 请降级您的Pod版本。 要解决此问题，请运行sudo gem uninstall cocoapods 。 登录到您的Salesforce组织 切换到闪电体验 setup >搜索app 点击Apps > App Manager 5.单击“ New Connected App 6.填写必填字段。 7.选中Enable OAuth Settings 8.对于Callback URL您可以输入任何内容。 因为一旦完成身份验证，我们就不会将用户重定向到其他网站。 我建议使用以下格式： myappname://auth/success 9.选择适当的选定OAuth范围。 （此处使用最小特权原则。） […]

反应本机自定义字体— iOS

▶继续由Dave Hudson撰写的这篇文章。 重要的是要注意， iOS根据其Postscript名称（或全名）来标识一种字体，该名称并不总是与该字体的实际Filename相同 。 因此，如果您不知道fontFamily（或PostScript名称），则可以在AppDelegate的 ` didFinishLaunchingWithOptions`方法中运行以下代码， 对于Swift 3.0 for familyName in UIFont.familyNames { for fontName in UIFont.fontNames(forFamilyName: familyName ) { print(“\(familyName) : \(fontName)”) } } 对于Objective-C for (NSString *fontFamilyName in [UIFont familyNames]) { for (NSString *fontName in [UIFont fontNamesForFamilyName:fontFamilyName]) { NSLog(@”Family: %@ Font: %@”, fontFamilyName, fontName); } } 这应该给你这样的输出， familyName : fontName 希望这可以帮助。 […]

适用于本机的CodePush教程

CodePush是一项云服务，可让Cordova和React Native开发人员将移动应用程序更新直接部署到其用户的设备上。 最终用户可以更新应用程序，而无需通过应用程序商店或手动等进行更新。 这篇文章试图解释您的react native项目中codepush的简单实现，这对于大多数常见用法都以为官方文档解释了各种自定义。 首先，您需要通过以下命令在终端中安装基于NodeJs的CLI： npm install -g代码-push-cli 其次，您需要创建一个CodePush帐户。 为此，请首先在终端中键入以下命令： 代码推送寄存器 然后，将要求您提供令牌，同时，您将被引导到自动注册的网页。 如果一切顺利，您将在注册后获得令牌。 复制令牌并将其粘贴到终端中，然后按Enter。 做得好！ 您已注册！ 现在是时候通过以下命令制作应用了。 请记住，您应该为正在使用的每个平台制作一个单独的应用程序，如下所示： 代码推送应用程序添加MyApp_IOS ios react-native 代码推送应用程序添加MyApp_Android android react-native 每次您运行这些命令时，您都会得到两种代码。 每个平台的分期和生产。 这些代码将在以下步骤中使用。 您可以稍后通过以下命令再次获取这些代码： 代码推送部署ls MyApp_IOS -k 现在，当您位于项目根目录中时，可以通过以下命令轻松将CodePush添加到项目中。 react-native链接react-native-code-push 系统将提示您输入要用于每个平台的部署密钥。 只需提供最后一步的密钥即可。 现在，您需要包装主应用程序组件，以让CodePush管理您的更改。 最简单的形式是以下形式。 它将尝试立即自动更新该应用程序（如果有新应用程序）。 从“ react-native-code-push”导入codePush； MyApp类扩展了Component { componentDidMount（）{ codePush.sync（）; } //逻辑，渲染… } MyApp = codePush（MyApp）; 如果您可以通过这种方式更新应用程序，则可以跳过此部分并跳到下一步。 但是由于可能不是您要寻找的用户体验，因此另一种方法是使用户知道该更新。 您还可以执行许多其他策略（例如：使更新成为可选的），但是我们要寻找的是在通知最终用户之后，使用自定义消息和按钮标题进行的强制更新。 我们通过下面的一段代码来做到这一点： […]

积极的反应：使用React.js进行开发

自2016年11月发布以来，在开发社区中已经有大量关于React和React Native的话题。 不知不觉中，React是Facebook的开源JavaScript库，目前在许多主要网站上使用。 但是，它的姊妹项目React Native使应用程序开发人员能够仅使用JavaScript来创建本机应用程序。 对于任何Web开发人员而言，结合HTML和JavaScript开发的潜力都是巨大的，特别是在React成功构建网站界面之后。 React Native允许您创建直接转换为本机组件的React组件。 然后可以在保留其样式的情况下在应用程序的将来区域中重用这些组件。 它们本质上是您应用程序的构建块。 与传统的本机开发方法相比，使用React Native的优势很多。 使用React Native时，组件将在多个平台上实现一致的渲染，而使用其他类似的解决方案可能会导致性能不一致，这是市场上越来越多的设备池的真正风险。 尽管使用其他非本机框架进行的开发也涉及JavaScript，但它们倾向于在本机应用程序中嵌入的Webview中运行，这使过程更加复杂。 React Native运行JavaScriptCore的嵌入式实例，该实例与特定于平台的本机组件进行通信。 React Native不仅会更改创建可行的本机应用程序所需的步骤； 它通过强调声明性语法，函数式编程和单向数据流，极大地改变了现有的范例。 当从一个州转移到另一个州时，这也使隔离问题和解决错误变得更加容易。 使用React Native的视图声明，当用户操作您的应用程序时，管理任何可能的意外情况变得更加容易。 根据我在React Native上与其他类似框架相比的经验，确实感觉前者比后者更能巧妙地架起Android和iOS之间的鸿沟。 现有的框架经常谈论使应用看起来像是两个平台都原生的，只是为了使最终的应用看起来像它们都不属于两者。 另外，React Native的核心是JavaScript。 从根本上讲，该平台与React.js并没有特别的不同，它使具有以前开发经验的新手可以轻松地适应它。 当然，它还可以提高效率，并允许您继承已经熟悉的技术和快捷方式。 由于仍是React，Native使开发人员能够轻松集成现有的JavaScript / React.js库，这在Facebook的鼓励下。 有些组件比其他组件更适合与React配合使用，其中Redux和MobX因其简化了应用程序状态管理的能力而受到关注。 当然，React还有很多东西。 作为iOS开发人员，我很欣赏它能够扩展我设计的潜在平台的能力，而无需花费很多精力。 并且，鉴于其相对的新近度，我期待看到React Native社区如何继续激发移动开发领域的发展。 最初发布在http://damianesteban.com/positive-reactions-developing-with-react-js/。

Nativ vs. Web App — Sterben秃头“ echten”应用程序？

Ich alsselbstständigerApp Entwickler mus immer schauen，是Ball zu bleiben。 Einen neuen Trend的趋势来自kürzesterZeit kein Geld mehr verdiene中的dassich。 不愿透露姓名的人是Flash Entwickler，我的名字是meinten，而dass Flash的名字是DASGROßEDING bleiben wird。 在德国的时代与历史上的Viele haben sich，在Leben lang das Geld mit der der Schubkarre上的Hause fahren。 Leider weit gefehlt和ich kenne nun schon einige Beispiele，在eine finanzielle Notlage gerutscht中丧命。 Ich muss mirnatürlich和darüberGedanken机械师。 Android和iOS上的Native Native App Entwicklung中的Meine Kernkompetenzen liegen。 Allein damit bin ich […]

我喜欢React Native而非Native IOS开发的4个理由

自从我开始学习React Native以来已经快一年了。 我已经赢得了两次黑客马拉松，我怀疑如果没有框架，我是否会赢得他们。 我昨天在Fb Dev Circle举办的一次黑客马拉松中赢得了第二次黑客马拉松，这启发了我写这篇文章。 1.跨平台 这是显而易见的，但值得一提。 在尝试本机响应之前，我正在使用C ++构建IOS应用，因此可以避免在将其移植到Android时重写相同的代码。 这个应用程式是由Swift所建，因此经常在Objective-C上被推荐。 但是，如果要将C ++代码连接到swift，则必须编写Objective-C来桥接C ++到swift。 因此，如果您想以一种真正本机的方式（没有框架）制作跨平台，则必须学习充满方括号，Objective-C的恐龙语言。 2.没有编译时间 响应时间不存在编译时间。 首次运行应用程序可能需要一段时间才能构建，但是此后，您可以通过在模拟器中键入`ctrl + M`来轻松启用热重载。 启用热重载后，当您将窗口从编辑器切换到模拟器时，设备将使用新保存的代码重载。 我从未见过有人使用热重装来进行本机IOS开发，并且它是一项改变生活的功能，使编码变得更加有趣。 如果您是从未曾尝试过热重装的IOS开发人员，我建议仅针对此功能尝试本机响应。 3.学习曲线 这部分取决于您当前所熟悉的堆栈。 1，您熟悉React React Native本质上就是React。 它只是使用本机函数而不是通过浏览器呈现。 在这方面有一些细微的变化，例如替换了 和驼峰式样式而不是连字符，但是它非常微妙，以至于大多数React开发人员都可以在几个小时内适应它。 2.您熟悉JS，HTML和CSS React Native有一个很棒的文档，它是交互式的，并且文档齐全，如果您熟悉如何将其用于本机应用程序，这将是非常令人愉快的。 有一些独特的反应概念，例如状态和道具，但是一旦您了解了这两个概念，就可以做很多事情，并且使用本机反应不会有很多挫败感。 该文档比Swift更易于理解，因为它们提供了示例，您可以轻松地复制和粘贴它们。 对于本机IOS开发，通常必须处理基于GUI的界面生成器，因此如果不将其连接到故事板，则复制粘贴将无法工作。 另外，Swift文档通常只提供最少的信息，因此可能难以实现。 3.您不熟悉Web开发 不用担心，这就是我所处的情况：我使用html canvas制作了简单的应用程序，但我对es6并不熟悉。 正如我上面提到的，React Native具有热重载启用功能，这使编码变得更加有趣，因此您将有很多时间学习Web开发所需的一切。 Js拥有大量在线资源，您可以通过复制和粘贴到项目中来轻松使用这些资源。 使用Swift时，通常存在版本不兼容的差异（即Swift 3和Swift 4），因此您必须更改部分代码才能使其在项目中工作，这有时会令人沮丧。 相比之下，无论您遇到什么问题，JS社区在这一点上都是如此之大，还有很多其他问题，并且很容易从在线粘贴代码。 就获得技能的价值而言，一般的Web开发技能（HTML，JS）可能会保留一段时间，因为Javascript是Github上最受欢迎的语言，而NPM是最大的软件包管理器，但是Swift可能不会持续很长时间如果iOS平台消失，则可以考虑（考虑到有多少Android手机正在起飞）。 4. Expo （从Windows开发iOS应用！） Expo是一项构建服务，无需使用Xcode即可构建iOS应用。 并非所有人都喜欢它，因为它会限制您使用Expo SDK提供的功能。 […]

适用于React Native iOS开发的My Development Toolset 2019

大家好！ 我想介绍一下我正在使用的React Native iOS开发工具，播放列表，服务，测试，库和网站以及在MacBook Pro 2015和2011上学习的最新选择。 更新：2019年10月30日。 工具类 有一些不同的开发环境DECO和EXPO 或者您可以使用核素 通过 原子 。 我现在使用EXPO XDE。 不要使用DECO家伙。 因为从您的计算机上删除DECO后，DECO仍然保留800MB。 不知道为什么 如果您真正使用真正的IDE，则可以使用PyCharm或Webstrom 。 雪花 ， 意大利辣香肠 和Ignite是适用于iOS的React Native入门套件。 f8App提供了教程来帮助您开始使用React Native。 React Native Expo的游乐场。 您还可以找到有关Expo的惊人应用 CodePush是另一个救生器。 此工具是一项云服务，可将移动应用程序更新直接部署到其用户的设备。 Npm桌面管理器 帮助轻松添加，删除，更新全局和本地软件包。 Sentry是一个跨平台的崩溃报告和聚合平台。 ESLint and Flow将帮助您编写更多质量和正确的代码。 DevTools for Redux有助于热重载，动作重播和可自定义的UI。 图书馆 开源React Native 应用的精选列表 NativeBase是React Native必不可少的跨平台UI组件。 我们可以从一个文件而不是每个组件更改应用程序的外观。 MobX是类似于Redux的状态管理库，Redux是当前的实际状态管理库。 但是，MobX尽可能简单。 React Native Apple HealthKit是用于与Apple […]

在深度第2部分中反应本地身份验证-真实世界的身份验证流程

这篇文章将涵盖： 经生产测试的认证流程概述。 使用第1部分中的现有应用程序实现Auth流。 连接Redux以处理应用程序UI和某些身份验证状态。 使用AWS Amplify处理Cognito用户会话。 我们将使用的导航库是React Navigation，但是这些模式基本上可以转换为任何导航库。 验证流程 如果正确实施身份验证流程，那么在您的应用程序开发之初就获得正确的身份验证流程可以节省大量时间。 这篇文章的目的是向您展示如何建立端到端的一些基本而又真实的身份验证，以及如何以一种在现实世界中有意义的方式将其连接到应用程序的UI中。 让我们快速浏览一个非常常见且有用的导航/身份验证流程。 在示例1中，LoggedInNavContainer和LoggedOutNavContainer包装在单个条目组件中。 这两个组件可以是任何类型的导航（抽屉，堆栈，标签），但是在我们的示例中，我们将要构建， LoggedInNavContainer将是Stack，而LoggedOutNavContainer将是标签。 在示例1中，我们基本上是检查一个loggedIn布尔值（来自您选择的状态管理），并根据其登录状态呈现一个完全不同的组件。 这两个主要组件通常本身就是导航组件。 当然，还有其他一些情况需要考虑，例如“帐户锁定” ， “重置密码”或“忘记密码” ，尽管我们可以在带有组件/ UI的if语句中添加更多逻辑来处理此问题，或者处理这些来自LoggedOutNavContainer导航器中。 另一个选择是使Main条目本身成为一个Navigator，以处理整个auth状态并进行相应的导航。 让我们更详细地看一下另一种方法： 在此示例中，有一个主要的导航组件（React Navigation的Think Stack Navigator），具有一个Login / Auth堆栈（或同一堆栈中的Login / Auth路由），以及一个“ Application”堆栈，该堆栈仅可访问/推送到如果用户已登录。 我们将重点关注第一个示例，因为它实现了选项卡，并且在实践中不像仅使用StackNavigators的第二组路由那样容易推论。 入门 首先，您应该跟着第一部分进行准备，或者准备好该项目，或者克隆该项目并配置src/aws-exports.js所有字段，以匹配来自AWS控制台的信息。 您还可以通过以下屏幕录像来创建第1部分： 在此文件中，我们有一个基本的登录表单，带有一个按钮，该按钮将向redux分配一个身份验证操作，然后该按钮将调用Auth.signIn ，并将用户名和密码输入到表单中。 我们还有一个模式，仅当用户成功使用用户名和密码登录但尚未通过两因素身份验证进行身份验证时，才会显示该模式。 用户成功登录后，我们将显示模式并允许用户输入其验证码。 auth / SignUp.js 此组件与“登录”组件相似，只是我们还有几个额外的字段可用于捕获用户的电话号码和电子邮件地址。 我们还具有模式功能，因此，当用户创建帐户时，我们通过两步验证进行验证，向用户发送短信并确认其短信，并在确认用户注册后隐藏模式。 auth / Tabs.js 在这里，我们进入SignIn和SignUp屏幕，并将其实现到TabNavigator中。 登录状态 用户登录后， Nav组件将呈现在我们的App.js文件中。 Nav是一个StackNavigator，目前只有一个Home路由。 本地路线将具有一个注销按钮，以演示注销功能。 […]

与React Native中的Debug和Release不同的iOS构建配置

默认的iOS构建配置Debug和Release可能一开始就足够了，但是迟早您可能需要扩展应用程序中的构建配置数量。 尽管这在本机开发中非常简单，但是不幸的是，在React Native中却并非如此。 构建配置 要管理构建配置，请转至Xcode项目设置（[PROJECT]→Info）： 您可以通过复制现有构建配置轻松地添加新的构建配置。 用于开发的重复调试配置以及用于测试飞行和App Store构建的发布配置。 您也可以通过快速双击任何配置来重命名。 调试与发布 调试配置无需任何代码优化即可构建完整的符号调试信息，以方便调试应用程序。 在发行版配置中，代码执行得到优化，并且构建中不包含符号信息，这导致最终可执行文件的尺寸较小。 尽管由于编译器的优化，您可能会期望内存布局或初始化方面的差异，这可能会导致所谓的“仅发行”错误，但发行版本的执行速度会更快。 运行构建配置 上面介绍的步骤足以在本机开发中设置新的构建配置。 要在构建配置打开方案中运行该应用并更改运行构建配置： React Native中的问题 请记住要检查您的TypeScript代码是否已编译（如果有）以及打包程序是否正在运行。 要使用指定的构建配置在React Native中启动iOS应用，您只需运行： react-native run-ios –configuration Stage 不幸的是，这对于任何基于发行版的配置都将失败，并显示一条错误消息，指出无法在AppDelegate中找到RCTBundleURLProvider ： AppDelegate.m：2：9：找不到“ React / RCTBundleURLProvider.h”文件 我们需要在目标构建设置（[TARGET]→构建设置）中为新的Release构建配置添加缺少的标题搜索路径和库搜索路径 。 为每个新的“发布”构建配置在“ 标题搜索路径”中添加一个条目： $(BUILD_DIR)/Release-$(PLATFORM_NAME)/include 为每个新的发布版本配置向库搜索路径添加一个条目： $(BUILD_DIR)/Release$(EFFECTIVE_PLATFORM_NAME) 现在，您可以在指定的构建配置中启动该应用程序： react-native run-ios –configuration Stage 请记住对“测试目标”执行相同的操作，否则此命令将失败。 黑暗中总有一线光明 没有任何以前的经验，在React Native中定义不同于Debug和Release的iOS构建配置可能会令人沮丧。 但是，在一点指导下，这可能是一个快速而轻松的过程。 如果您对如何为每个构建配置设置不同的Google配置感兴趣，建议您阅读本教程。 尽管它是为本机开发而编写的，但是您可以在React Native中完全相同地设置运行脚本 。 最初发布于 brightinventions.pl 。 […]

响应本机Swift和Promises

快速参考指南 对于任何给定的React Native项目，我更喜欢在本机端使用Swift并在Javascript端使用promises。 这是如何实现这一目标的瘦身方法。 1.桥接头文件 您需要一个.h文件来将Objective-C库公开给您的Swift文件。 该文件称为“ ProjectName-Bridging-Header.h”，通常包含您要访问的几个react native库。 ProjectName-Bridging-Header.h 2. React Native Obj-C Swift 您将需要另一个文件（.m），以Objective-C的方式描述您的Swift类，以便React Native可以理解它。 此处编写的函数映射到您将在下一节中看到的Swift类公开的函数。 例如，我将使用为自闭症音乐项目应用程序编写的AudioManager类的一部分。 音频管理器 3.您的Swift班 ！ 最后，我们开始编写一些Swift。 这就是AudioManager类的大部分逻辑所在。 AudioManager.swift 4.在Javascript中使用它 现在我们回到了Javascript（又名仙境😉）中，我们可以在通过本机网桥进行交谈时使用所有JS技巧，例如async和await。 AudioComponent.js 我希望您发现快速演练对您有所帮助，如果您有任何疑问或需要澄清，请询问！ 另外，请务必检查“自闭症音乐计划”，这是一项为患有自闭症谱系障碍的儿童创作特别设计的音乐的合作项目。 谢谢！ 米克斯罗维克