Tag: React
如果端口8081被其他东西占用，则需要作出反应本机的工作
免责声明：我已经针对应用程序的ios构建测试了这些步骤。 可能是android版本需要一些调整。 像大多数其他人一样，我的McAfee防火墙使用端口8081…因此，react-native会抱怨以下消息： 端口8081已被使用，打包程序未运行或运行不正确 由于我不想禁用防火墙，因此我在github和stackoverflow上寻找解决方案。 最常用的解决方案是在项目中的所有文件（包括node_modules）中进行查找/替换。 完成该操作后，我看到了一些进展，因为仿真器显示它正在尝试从新端口（本例中为8082）加载代码。 确保还要在package.json中进行更改： 另一件事是，我注意到地铁捆扎机似乎对此卡住了： 捆绑`index.js` [未开发的开发项目]░░░░░░░░░░░░░░░░0.0％（0/1） 在github上搜索了更多内容后，我发现此注释建议执行以下操作： 纱线去除巴别针预设反应本机 纱线添加babel-preset-react-native@2.1.0 完成此步骤后，我终于设法使应用程序运行：
Cara integrasi React Native Dengan Swift Dan CodePush（Panduan lengkap）-包。 2
Seteleh lama gak nulis di beberapa minggu terakhir karena aktivitas yang padat😌，akhirnya kali ini gua sempetin lanjutan dari artikel sebelumnya。 Ini bakalan singkat dan ga bertele-tele，cukup singkat karna sisanya cuma cara积分密码推送文件Swift kita。 安装Codepush Kita Pakai react-native-code-push yarn add react-native-code-push 喀麦店林克项目计划，印度塞拉利昂共和国 react-native link react-native-code-push Perintah tersebut akan menambahkan文件文件yang dibutuhkan secara otomatis。 dani untuk memastikan lagi，bisa kita […]
积极的反应：使用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/。
适用于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路由。 本地路线将具有一个注销按钮，以演示注销功能。 […]
iOS开发人员进入React Native的旅程
像许多iOS开发人员一样，我对JavaScript也有不好的看法。 我记得JavaScript是一种怪异的，狂野的西方语言，其中没有两种环境是相同的。 我对JavaScript的记忆是在Xcode的本机工具远远优于Web工具的时候形成的-我们有很酷的东西，例如情节提要，自动完成，内置在开发环境中的大量反馈以及无处不在的集成库。 工装 从那时起，多年来，Web以惊人的速度取得了进步和成就，而Xcode基本上（在Swift中添加了Playgrounds）或更低（Swift重构工具）。 JavaScript语言和开发环境已经发展。 我们喜欢的Xcode的所有功能-IDE自动完成，内联文档，语法错误的即时反馈-基本上已内置于现代环境中。 故事书-基本上等效于Xcode Playgrounds-很棒（并且通过VSCode内置的Orta的扩展）。 测试中 JavaScript测试（通过Jest🃏）是另一个联盟。 它几乎是即时的，是自动的（它监视Git的更改并运行受影响的文件的测试），具有类似RSpec的语法，并且可以在每次保存时运行。 本机单元测试始终感觉像是事后的想法，以至于有些博客文章介绍了Apple发布的虚拟现代测试框架。 XCTest很棒，但是感觉就像是一个旧式测试框架。 它与JUnit几乎没有什么不同，仅限于一种setUp方法和一种tearDown方法，并且无法在保存时自动运行测试。 诸如Quick / Nimble之类的替代方案非常现代，但是，如果没有Xcode内置的第一方支持，基本功能（如运行单个测试）将丢失。 反馈回路 JavaScript的反馈循环比本地反馈快得多。 我从未从事过没有荒谬反馈周期的大型本地项目。 在某些项目中，从git clone到副本更改可能要花费整整30分钟的时间 。 增量构建可能在20秒到3分钟之间的任何时间-刚好足以失去焦点或被Twitter分散注意力。 模拟器重新启动，并且必须手动导航回控制器是很痛苦的。 输入：热重装。 最佳的反馈循环会对开发人员的工作效率和代码质量产生巨大影响。 当反馈循环很长时，编写代码的方法是如此不同 -我发现自己试图一次创建整个功能或整个屏幕，进行编译，并希望在我喝咖啡或散步时获得最好的效果。 如果以分钟为单位来计算编译时间，则无法实现真正的TDD。 在JavaScript允许的较短反馈循环中，我发现自己正在练习红绿重构，真正的TDD并进行实时设计迭代。 React Native的性能和“感觉” 甚至当我开始听说非本地开发环境中的改进时，我都sc之以鼻。 我记得PhoneGap应用程序感觉如何，使用Xamarin有多困难（多年来可能有所改善？）。 我记得用这些技术制作的移动应用程序感觉不对 ， 他们如何缓慢滚动或过渡。 但是，尽管React Native肯定会增加一些开销，但它的性能足够快，以至于我很难知道我使用的是本机应用程序还是本机应用程序。 当涉及到需要高性能代码的事情时，您可以在React Native应用程序中本地编写该代码，这意味着您可以在99％的情况下使用更好的开发环境，更快的周期，热重装以及更好的测试。 对于其余1％的情况，很容易退回到您可能已经习惯的本机环境。 未来 React Native的未来并不像Swift的未来那样确定。 几乎没有人担心苹果会在明天，下周或明年放弃Swift，但谁知道React Native在五年内是否仍会是一个活跃的项目？ 这些担心是公平的，但实际上考虑五年后的技术是没有意义的。 拉起手机。 分页浏览您的应用程序。 这些应用程序中有多少已经存在五年以上了，而在已经存在的应用程序中，最近有多少没有经过完整的重写或重新架构？
反应原生，原生
使您的Swift应用更具React Nativey 自白 我要告诉你一个肮脏的小秘密。 有时候，我很想念React Native。 我知道我知道。 感觉很不对劲。 但是其中有些感觉是正确的。 反应性的，声明性的UI代码？ 热装？ 可以绕过应用商店的更新？ 而且即使Javascript在很多方面不如Swift出色，它也变得相当不错（新的异步/等待和Flow的渐进类型检查）。 我一直不时地尝试它， 希望它变得惊人，并让我摆脱所有在iOS开发中发疯的事情。 当然，它并非没有缺点，但某些功能却非常有趣且富有成效-谁不想玩得开心又富有成效？ 对于我们这些人来说，React Native并非可行之举，如果我们仍然可以在编写Swift的同时获得一些功能呢？ 今天，我们将探讨如何拥有反应性的，声明性的UI代码和热重载应用程序数据，从而节省大量测试时间。 另外，也许我们可以做一些绕过应用商店进行更新的事情吗？ 反应式，声明式用户界面 React Native使我们可以编写UI代码，感觉更像是对UI的描述，与配置和转换所有数据的逻辑分离。 我们没有花哨的虚拟DOM React，但是我们可以解决这个问题。 Reactor是我编写的一个小型Swift库，灵感来自Elm，Redux，以及Benjamin Encz等人撰写的出色ReSwift著作。 请参阅文档以更深入地了解Reactor，但是我们正在使用的基本模型是： 查看示例项目，看看它是如何完成的。 但这几乎就像您可能想象的那样：我们的状态旨在使用Marshal进行序列化/反序列化，然后将其全部与我们的体系结构和文件监视程序一起使用。 我认为这里有很多潜力：重新创建用户报告的错误状态，无需重新编译即可测试UI，轻松检查应用程序的当前状态……各种有趣的东西。 绕过App Store 我们正在迅速接近已知的iOS世界的终结。 由于其解释性，Javascript不仅可以热重载代码，而且可以热重载已通过网络接收的代码。 这带来了A / B测试的整个可能性，绕过了应用商店进行某些更新和安全漏洞。 😛 正如我们之前讨论的那样，我们无法热重载Swift代码。 但是，我们知道可以热装应用程序数据。 那么，如果我们将更多的UI表示为应用程序数据怎么办？ 也许我们可以编写一些可重用的组件，并且数据本身会告诉我们它要使用哪个UI组件。 正如约翰·桑德尔（John Sundell）所展示的，这是Spotify正在做的事情。 观看该视频。 很酷，很酷的东西。 结论 React Native从iOS社区获得了一些帮助。 尚未尝试过的开发人员可能不应该得到很多，但像所有工具一样，它也都有其优点和缺点。 也许这些缺点在您的项目中对您不利。 这并不意味着我们不应该垂涎专家，也不应该试图弄清楚如何将其他领域的出色软件开发人员的想法应用到我们自己的领域中。
如何添加启动画面以响应本机（IOS）
在本文中，我将告诉您如何向“本机”（IOS）添加启动画面。 我要告诉你非常简单的步骤。 这是我们可以为每个移动应用程序创建的非常初始的东西。 因此，对于每个开发人员来说，知道如何以正确的方式添加它都是非常重要的。 您可以在此处查看整个源代码： rockinghajay / splash-screen-react-native 闪屏React Native（IOS和Android）。 通过……为rockinghajay / splash-screen-react-native开发做出贡献 github.com 我正在使用简单的react native项目向其添加初始屏幕。 因此，让我们开始初始化系统中的react native项目。 react-native初始SplashScreenReactNative cd SplashScreenReactNative 将这两行运行到终端后，您将在系统上响应本机项目。 如果您注意到React本机应用程序具有白色背景初始屏幕。 在该屏幕上，我们将添加自定义启动屏幕。 如何注意到第一个白色启动画面，我们需要在我们的应用程序中首先设置深色背景。 用下面的代码替换您的App.js组件 首先在Xcode中打开您的应用。 cd ios / SplashScreenReactNative.xcodeproj 在Xcode上打开项目后，您将转到Images.xcassets文件夹，您可以在下面的屏幕截图中看到该文件夹。 然后，您需要单击Xcode底部显示的+图标，然后单击“ 新建图像集”。 然后继续将Image重命名为一个图标 ，然后根据需要将其拖动到框中以添加图像集。 然后，您必须打开Info.plist下面的LaunchScreen.xib ，您将看到。 这是ios的默认初始屏幕，选择两个文本元素“ SplashExample”和“ Powered by React Native”并将其删除。 继续并将背景色设置为“深灰色”。 在下一步中，我们必须将图像视图添加到初始屏幕视图中。 您可以通过按图标并搜索图像来找到该图像，然后单击图像元素，如上图所示。 并将UIImageView拖动到视图的中心 现在我们要从Images.xcassets设置图像源。 选择图像下拉菜单时，应该显示Images.xcassets中的所有图像，然后选择您最近添加的图标。 现在，您需要将图像设置为与垂直和水平中心对齐，然后将“内容模式”更改为Aspect Fit 在下一步中，我们需要确保我们的图标在所有设备上都保持居中，无论使用哪种屏幕尺寸的设备，因此现在您都可以按照上面的gif进行相同的操作。 您可以在“自动调整大小”部分中看到要禁用外部红线并通过单击启用内部红箭头的功能。 这将使图像相对于屏幕尺寸保持居中。 […]
使用React Native和TypeScript启动并运行
快速，现代的React Native和TypeScript入门指南 在本文中，我将介绍如何快速将TypeScript添加到React Native项目中。 如今，许多项目都在使用TypeScript。 它提供了JavaScript静态类型，并有助于简化各种组件之间的关系。 在我们的项目中，每当在文本编辑器中保存文件时，我们都会自动将TypeScript编译为可运行的JavaScript。 要查看最终样板，请单击此处。 该项目假设您已经安装了React Native CLI并在您的机器上工作 我们要做的第一件事是创建一个新的React Native项目： 反应本征型脚本 创建项目后，将cd进入目录 cd rntype脚本 接下来需要做的是确保我们在计算机上全局安装了TypeScript： npm i -g打字稿 现在，我们需要继续安装React和React Native所需的类型。 这些类型为我们提供了React和React Native的声明文件。 纱线添加@ types / react-native @ types / react 现在我们已经建立了依赖关系，我们需要创建一个tsconfig.json文件。 该文件将让我们决定诸如根文件，编译器选项和已编译JavaScript的输出目录之类的内容，这些最终将在我们的应用程序中使用。 在目录的根目录中，使用以下选项创建一个tsconfig.json ： { “ compilerOptions”：{// 1 “ target”：“ es2015”， “ module”：“ es2015”， “ jsx”：“反应”， “ outDir”：“ build”， “ rootDir”：“ src”， […]
本机反应：开发人员日记
关于如何 创建 此实验项目的 虚构说明 。 3月15日。 从总部收到备忘录。 他们想在React Native中看到一些东西。 Swift和Java是合格的。 他们正在出路。 我们需要新的热点。 反应本机。 您编写了一些JavaScript和繁荣。 您将获得一个iOS和一个Android应用程序。 您可以立即重新加载代码。 您会得到一个由强大的枪支支持的狂热的开源社区。 脸书 爱彼迎。 乌克兰有人。 大枪。 因此，拉起一些教程，复制并粘贴一些示例代码，然后开始构建一些东西。 随便啦 我是一位本机应用程序开发人员，在Objective-C，Swift，Java甚至Android NDK的多平台C ++代码方面都有丰富的经验。 当HTML5尽其所能地进入应用程序游戏时，我大笑并嘲笑了它徒劳的尝试。 但是React Native引起了一些严重的轰动-我的意思是，乌克兰的一个家伙-而且大佬们想要一些东西。 随便啦 哦，我给你点东西。 3月16日。 我什么都没有 3月17日。 设法使React Native的Hello World应用程序等效于在iOS模拟器和Android模拟器上加载。 但是，这几乎不像按Xcode中的“播放”按钮那样简单。 必须在项目目录的根目录中打开命令行，并为iOS输入一条运行指令，为Android输入一条单独的指令（要求已打开仿真器）。 说到IDE，我决定使用Atom，而Nuclide在其之上。 让我想起了Eclipse时代的Android插件。 那些日子我不想被提醒。 但是，直到发布某种React Native Studio为止，它都必须做。 还安装了Yarn软件包管理器来替换npm，仅因为我认为“ yarn add”和“ yarn remove”是安装第三方React Native组件时要记住的简单易懂的命令。 事实证明，纱线初始化和安装也明显比npm更快。 这绝对至关重要，因为星期五。 npm命令 npm […]
