Tag: react native

比较Native iOS（Swift）和React-Native的性能: React-Native是一个跨平台的移动框架，可让您仅使用JavaScript来构建应用程序。但是，与其他混合移动技术不同，您不是在构建“移动Web应用程序”（Web应用程序包装在本机容器中）。最后，您得到了真实的东西。您的JavaScript代码库已编译为与使用Objective-C构建的iOS应用程序或使用Java的Android应用程序无法区分的移动应用程序。这意味着React-Native提供了本机和混合移动应用程序的好处。我的目标是找出他们是否能够兑现承诺。为此，我将需要在Swift和React-Native中构建相同的应用程序。它必须足够简单，以便我可以同时学习两种语言并及时完成应用程序，但又需要足够复杂，以便可以比较每个应用程序的CPU，GPU，内存使用情况和电源使用情况。该应用程序将具有四个标签。第一个将被命名为“个人资料”，并提示用户登录Facebook，以检索用户的个人资料照片，姓名和电子邮件并将其显示在页面上。第二个选项卡称为“待办事项列表”，使用NSUserDefaults（iPhone内部存储器）将是一个简单的待办事项列表。它将具有“添加项目”和“删除项目”功能。第三个选项卡将被命名为“页面查看器”，并将由一个页面查看控制器组成。页面视图控制器将具有用户可以在其中滑动的三个屏幕（“绿色”，“红色”和“蓝色”屏幕）。最终选项卡将被命名为“地图”，并将包括一个放大到用户当前位置的地图视图，在地图上带有一个蓝点代表用户的位置。迅速的过程首先是iOS和Swift。学习Swift相对容易，因为它类似于我已经知道的许多语言（Java，C ++）。但是，学习Cocoa Touch（iOS框架）是一项艰巨的任务。我在Udemy.com上观看了罗伯·珀西瓦尔（Rob Percival）的视频系列，这是从Swift的引入到完成多个应用程序的全部过程。即使在介绍性视频之后，我仍然在理解Cocoa Touch方面仍然遇到困难。这些视频中的许多“学习”都涉及复制/粘贴代码，但我们不确定它的作用。我什至有一种感觉，甚至老师都不知道，只是记住了。我不喜欢不知道我的代码的每一行做什么。毫无疑问，Apple的IDE（Xcode）非常先进且用户友好。您可以单击“情节提要”，然后按所需顺序设置应用程序屏幕，在屏幕上将要启动应用程序的地方放置一个箭头。在第一个标签（“配置文件”）中，我可以将图像视图，名称标签和电子邮件标签拖到所需的位置。然后，我将其拖到代码中并进行连接，在此过程中的代码中创建了一个新变量。然后，以编程方式，一旦用户通过Facebook登录，我就将这些变量名称设置为其相应的Facebook值。花了3周的时间才完成了该视频系列，并在Swift / iOS中获得了舒适的编码。您可以通过以下链接在GitHub上查看此应用程序的Swift版本的代码：https：//github.com/jcalderaio/swift-honors-app 反应本机过程第二名是React-Native。学习JavaScript比Swift难一点，但仍然不难。我尝试从互联网上学到的React-Native片段中编写应用程序，但这还不够。我需要一些视频讲座。回到Udemy.com ，我观看了Stephen Grider对React-Native的精彩介绍。起初，我感到难以置信。 React-Native的结构对我来说毫无意义，但是在观看了Stephen的讲座仅一周之后，我便能够自行开始编写代码。我真正喜欢React-Native的地方在于，与iOS不同，您编写的每一行代码都很有意义-您知道每一行代码的作用。另外，与iOS中不同（在iOS中，您必须调整每个页面的设置才能在不同屏幕尺寸的横向和纵向上看起来都不错），而在React-Native中，所有调整都是为您完成的。没有任何设置，我使用的是横向制作的应用程序，看起来非常不错。我以多种不同的iPhone尺寸运行了该应用程序，并且在那里看起来也不错。由于React-Native使用flexbox（类似于HTML的CSS），因此它可以响应正在显示应用程序的屏幕大小。您可以通过以下链接在GitHub上查看此应用程序的React-Native版本的代码：https://github.com/jcalderaio/react-native-honors-app *更新：由于升级到iOS 10，此源代码以前无法正常工作。我已解决了该问题，现在应该可以正常工作🙂 […]

Xcode LaunchImage大小: Iphone Xs Max（Portraint IOS 12+）=> 1242px×2688px Iphone XR（Portraint IOS 12+）=> 828px×1792px Iphone Xs Max（Landspace IOS 12+）=> 2688px×1242px Iphone XR（Landspace IOS 12+）=> 1792px×828px Iphone X / Iphone Xs（Portraint IOS 11+）=> 1125px×2436px Iphone X / Iphone Xs（Landspace IOS 11+）=> 2436px×1125px 视网膜高清5.5英寸（Iphone Portraint IOS 8+）=> 1242px×2208px 视网膜高清4.7英寸（Iphone Portraint IOS 8+）=> 750px×1334px Retina HD 5.5”（Landspace Portraint IOS 8+）=> 2208px×1242px […]

React Native中的React导航和导航器简介: 从应用创意开始，您就计划同时支持iOS和Android设备，但是花时间学习，实现和优化每个平台的单独导航代码并没有意义。否-有一个更好的方法，使用基于Javascript的纯导航库，该库使用本机驱动程序进行平滑过渡。 React Navigation采用了这种方法，避免了在Objective C / Swift / Java / Kotlin中的任何必需知识，从而使您可以将更多精力放在应用程序体验上。借助React Navigation，我们可以立即使用现代应用程序期望的所有转换，包括标签导航，抽屉式导航（向上滑动），堆栈导航（在整个层次结构中滑动）和深层链接。本文将介绍在为应用程序设置基本导航系统之前与导航器一起使用的方法。与许多React项目一样，官方文档相当冗长，而且不太统一。但是，在建立了一些基础知识之后，我建议您通读本文，以巩固您的理解并熟悉所有配置选项。什么时候不使用？至少对我来说，很难争论何时不对本地API使用React Navigation，因为经济上的好处和自定义远远超过了缺点。如果您的应用程序没有执行非常密集的Javascript处理，则导航过渡不应该出现性能问题，该过渡支持60 FPS动画。当然，当您在场景中引入更多复杂性时，您可以测试您的应用并找到表现与性能之间的平衡。单纯的Javascript实现不会使您完全了解各个操作系统的本机API，但是您无法访问的内容是以受支持的导航器的一致性进行交易的，所有这些导航器都可以用纯Javascript配置。对于一家注重Javascript的公司，希望在其所有产品中简化采用的技术，该软件包非常有意义。总的来说，我对React Navigation以及React Native社区都非常满意，在撰写本文时，该软件包的每周下载量约为90k-100k。数量可观。使用yarn或npm将React Navigation直接安装到您的React Native项目中：毛线添加react-navigationornpm install-保存react-navigation 理解导航器的作用本质上是使用React Navigation的唯一障碍。让我们直接跳到他们身上。 React Navigation应用程序是一系列导航器，用于定义应用程序的屏幕流。如果现在还很模糊，那么图表就来了。每个导航器都带有各种配置选项，我们可以用纯Javascript定义这些选项。例如，堆栈的标题行为或选项卡的图标和样式。导航器的行为将根据您选择的导航器而有所不同。以下是我们可以使用的一些导航器选项：我们还可以将导航器嵌入其他导航器中，以根据需要扩展我们的应用程序内容。例如，我们可以在选项卡导航器中嵌入一个堆栈导航器，因此每个选项卡都包含一个层次化的视图。这是React Navigation成为功能强大的工具的地方，它使我们可以根据需要雕刻导航。 […]

First React Native项目设置中出现的常见问题。: 嘿，再次在关于React-Native的一系列讨论中，我们谈论的是First React Native Project Setup中的挑战。我之所以这样写，是因为我经常在不同机器上建立本机项目时遇到这些问题，并且还发现一些问题，这些问题没有任何永久性的解决方案，以至于这些问题在某些时候变得令人恼火，并挫败了新来者。反应本机。因此，我将列出其解决方案中的一些问题。模块安装和版本控制问题：如果要响应本机项目，那么版本会带来很多问题。因此，在进行所有设置并成功运行之前，请检查所有必要的安装及其最低要求的版本：一个。节点版本（4.0或更高版本） b 。反应本机Cli（最新） C。 RNPM（最新） d 。 React（与React Native版本兼容） 2. 脚本问题：在某些情况下，当我们使用命令“ react-native init ProjectName”初始化react native项目时，则在iOS构建的情况下，默认情况下，脚本是在Xcode设置构建阶段编写的，这会在查找时产生问题来自节点模块的反应库的正确路径。要解决此问题，请执行以下步骤：一个。从项目目录中打开Xcode项目。 b 。在Xcode的侧栏中选择Project Target。 c 。转到BuildPhase→捆绑React Native代码和图像，如果编写了任何脚本，则将其删除。（链接： https : //github.com/facebook/react-native/issues/12217） 3 。在成功构建ios构建成功后的某些情况下，simultor会出现一个问题，显示红色屏幕，并显示一条消息，例如：“未找到节点模块/ lib / react和Systrace”。那么在这种情况下，您必须使用react-native-git-upgrade ，只需在项目目录路径上的终端中运行此命令，如果出现消息，提示未找到react-native-git-upgrade命令，则首先使用命令npm install […]

如何为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的大小仅与视网膜文件有关。刷新，瞧！结论希望对您有帮助。我知道这将是未来的乔纳森，那笨拙而健忘的白痴。

本机与本机: React Native是一个很好的工具，可使用Javascript和直接来自Web开发的其他概念/技术来创建多平台本地应用程序。但是，与使用平台的官方工具包制作应用程序相比，开发人员的体验又如何呢？让我们通过使用Xcode在React（Native）和Cocoa Touch（Swift）中为iOS构建一个简单的登录界面，来探讨每种方法的优缺点。虚拟主登录屏幕仅由一个文本框，一个登录按钮和一条消息提示用户使用秘密密码进行身份验证组成。通过输入secret一词，我们访问仪表板，该仪表板只是受保护内容的占位符。在GitHub上查看完整的源代码，其中还包括仅Web版本供参考。按照自述文件获取有关如何安装和运行每个应用程序的说明。那么，最终的Swift代码与其JSX对应代码有何不同？数量方面，两个源都包含相似数量的行。在质量方面，我们可能会怀疑Swift是一种新语言会具有一定的可读性优势，但是不断发展的ECMAScript标准似乎保持了很好的状态。这是每个控制器的实际外观： reactnative-app / index.ios.js import React, { Component } from ‘react’ import { AppRegistry } from ‘react-native’ import { createStore } from ‘redux’ import { Provider, connect } from ‘react-redux’ import userReducer from ‘core/lib/reducers/user’ import React, { Component } from ‘react’ import […]

如何在React Native应用程序中使用反应导航关闭键盘: 在移动应用程序中，显示和关闭键盘似乎是一件微不足道的事情，但是当它与react-navigation和模式呈现一起使用时，在自动关闭它方面会很棘手。至少那是根据我最初的假设。本文旨在详细介绍我从键盘处理中学到的知识，以及在处理TextInput时如何避免多余的敲击。由于所有库都是开源的，因此还将有很多代码拼写。在撰写本文时，我正在使用的React Native版本是0.57.5 内置的TextInput组件 React Native带有许多基本组件，其中一个是TextInput，用于通过键盘将文本输入到应用中。从’react’导入React，{组件}; 从’react-native’导入{AppRegistry，TextInput}; 导出默认类UselessTextInput扩展Component { 构造函数（道具）{ 超级（道具）; this.state = {text：’Useless Placeholder’}; } render（）{ 返回（ <TextInput 样式= {{高度：40，borderColor：’灰色’，borderWidth：1}} onChangeText = {（文本）=> this.setState（{text}）} 值= {this.state.text} /> ）; } } 就是这样，每当我们单击文本输入时，就会出现键盘，允许我们输入值。要通过按屏幕上的任意位置来关闭键盘，简单的解决方法是将TouchableWithoutFeedback与Keyboard一起使用。这类似于在iOS UIView拥有UITapGestureRecognizer并调用view.endEditing import { Keyboard } from ‘react-native’ Keyboard.dismiss() ScrollView中的TextInput 通常，在React Native（主要是ScrollView的滚动组件中，我们应该有一些文本输入，以便能够处理较长的内容列表并避免使用键盘。如果TextInput在ScrollView则关闭键盘的行为会有所不同，并取决于keyboardShouldPersistTaps 确定敲击后键盘何时保持可见状态。 ‘never’ （默认），在键盘向上弹起时在聚焦文本输入之外点击会关闭键盘。发生这种情况时，孩子们将不会收到水龙头。 ‘always’ （ […]

在您的React Native应用中获取Xcode版本号: 如果您出于任何原因希望能够在应用程序中显示版本号，我将向您展示如何在React Native iOS应用程序中实现该版本号。步骤1：使用react-native init versionApp创建一个新的react native项目第2步：编辑AppDelegate.m文件并添加以下代码行 //创建版本变量并创建props对象 NSString * version = [[[[NSBundle mainBundle] infoDictionary] objectForKey：@“ CFBundleShortVersionString”]; NSDictionary * initialProps = @ {@“ version”：version}; 第三步：将创建的props对象传递到同一AppDelegate.m文件中的initialProperties中。默认情况下，为零。之前： RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL：jsCodeLocation moduleName：@“ VersionApp” initialProperties：nil //更改此行并传入新的props对象 launchOptions：launchOptions]; 之后： RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL：jsCodeLocation moduleName：@“ […]

没有捆绑包网址: 这是React Native开发人员中的一个众所周知的问题。将NSAllowsLocalNetworking添加到Info.plist NSAppTransportSecurity NSAllowsArbitraryLoads NSAllowsArbitraryLoadsInWebContent NSAllowsLocalNetworking 从iOS 9开始，默认情况下，Application Transport Security会阻止“ http请求”。它仅允许https（安全）连接。通过添加上面的代码，我们将info.plist配置为启用“ http request”。 Info.plist负责配置连接和其他内容。资源资源

让我们动起来：React Native动画简介-第2部分: 如果您想完全从头开始，这里是第1部分的链接，在第1部分中，我们使用LayoutAnimation动画了单个元素在屏幕上的重新放置。让我们直接跳回去吧。在本文中，我们将不再使用LayoutAnimation ，它是一个很好的工具，可用于在要更新的列表中重新定位元素，隐藏/显示菜单等，但是如果您希望动画中的粒度更详细些怎么办？好的，这就是React Native的Animated API派上用场的地方。让我们从上一篇文章中获取Jake，但让我们决定我们要让他旋转到位，并且还要基于某种状态来取消此旋转。当然，随心所欲，但这是我的文章，所以我在这里负责。我们将从第一部分结尾处的代码停止处开始，将Jake锁定在屏幕中央，添加某种状态以决定他是否在旋转，并摆脱一些按钮和其他一些按钮清理东西的线。 // App.js 从“反应”中导入React，{组件}；导入{ 按钮 StyleSheet，图片，视图 }来自“ react-native”；从“ ./jake.png”导入杰克；导出默认类App扩展组件{ 构造函数（道具）{ 超级（道具）; this.state = { 旋转：错误 }; } render（）{ 返回（ <按钮 style = {styles.button} 标题= { this.state.spinning？ “关闭旋转”：“打开旋转” } onPress = {（）=> {}} /> ）; } } const styles = StyleSheet.create（{ 容器： […]