Tag: react native

自定义React Native图标？ 是的

2.编辑Info.plist并添加一个名为Fonts的属性，该属性由应用程序提供（如果Xcode无法自动完成/不使用Xcode，则为UIAppFonts），然后键入刚刚添加的文件。 它看起来像这样： 步骤1 在Sketch或Illustrator中创建图标，并将它们另存为svg。 第2步 转到http://fontello.com/并上传您的自定义字体。 您也可以从它们的选择中进行添加，以使它们都保持相同的字体。 第三步 从Fontello下载字体文件并打开它。 复制文件夹（其中的所有内容）并转到您的本地项目。 进入保存资产的目录，并创建一个名为fonts的文件夹，然后将该文件夹粘贴到其中。 我建议将文件重命名为“ fontello”。 接下来，打开Xcode并执行与“基本安装过程”中所述相同的插入过程，但使用新的字体文件。 完成此操作后，返回到项目所在的文本编辑器。 步骤4 创建一个名为“ icon.js”的文件。 创建文件后，添加以下代码。 第5步 然后，在需要图标的组件中，您将可以执行以下操作： 希望这对像我一样挣扎的人有所帮助。 干杯!

Flutter vs React Native-您需要知道的。 – openGeeksLab的Dmytro Dvurechenskyi

Flutter vs React Native-您需要知道的。 先进的工具不时需要现代流行的移动应用程序来实现它们。 因此，专业开发商努力满足这一领域的实际市场需求。 最有趣，最有用的创新成为讨论的主题。 React Native跨平台于2015年在GitHub上作为开源发布，结合了Android和iOS本机API。 尽管它具有无可置疑的好处，但是我们可以肯定的是，您一定听说过另一种有趣的，不寻常的编程方法-Flutter，它是Google对标准技术的高级答复。 这个新的用户界面于2017年启动，旨在在创纪录的时间内制作iOS和Android版本上的高质量本机应用程序。 什么是颤振？ Flutter是Google对React Native的回应，我敢肯定您一定听说过它。 在Flutter发布之后，各种移动开发社区开始进行比较讨论，其中“ React Native或Flutter”是使用JavaScript开发跨平台移动应用程序的最佳框架。 但是，这很容易。 Flutter允许Google开发人员同时使用完全相同的代码同时为iOS和Android构建应用。 对于Flutter来说，这听起来像是一次巨大的飞跃，但要赶上React Native仍然有很长的路要走。 目前，对React Native开发心存疑虑的开发人员甚至没有认真考虑Flutter。 尽管我相信Flutter可能是移动应用程序的未来。 关于Flutter的5个快速总结： –这是Dart语言。 说什么飞镖？ !!! 那是大多数开发人员的反应。 –推荐的带有Flutter插件的IDE是Android Studio或Intellij Idea。 – Flutter具有Dart桥，应用程序较大，但运行速度更快。 与带有Javascript bridge的React Native不同。 – React Native和Flutter共享类似的范例，例如事件处理程序和类扩展。 – Flutter的动画和安装体验分别非常出色和流畅。 大多数人在初次熟悉Flutter时会问的问题是“它像React Native吗？” 为了回答这个问题，我们的开发人员Viktor Gavrilov驾驶Flutter旋转了一下，这是他的发现： 在添加软件包时： 在Flutter中，所有内容都会自动连接。 但是，在React中，某些本机模块是手动连接的。 我们通过内置的“程序包管理器”连接程序包，因此不必像通常那样通过Xcode CocoaPods，React Native链接进行连接，而是通过npm将程序包连接到RN。 我们添加到pubspec.yaml。 该包，我们之前在https://pub.dartlang.org/flutter中找到并执行以下命令： “颤振包得到” […]

在本地原生共享库扩展

共享扩展名：React Native和Redux。 他在西班牙干草堆上进行了现场勘查，并在西班牙的埃斯巴萨和西班牙的萨尔瓦多省的萨洛尔河之间进行了考察。 分享到以下内容：扩展名：无限制的扩展名：没有必要的扩展名： ¡阿斯奎·瓦莫斯你好！ 从根本上讲，Remote Persist（empleando como storage AsyncStorage ）和Obtiene Toda laInformationación中立语言是什么意思，重要的是store和其他store 。 Apple的Android操作系统保护功能可扩展到Android设备上的共享库扩展名，适用于Apple sistemas，Apple Bi estEstéculovoy和ceñirmetan solo al sistema操作Apple的扩展名zh-cn上的Androidescribiréuna segunda parte contando los pasos）。 诺塔 iOS las extensions（tanto las denominadas Share como las Action）上的Antes de comenzar es Importante destacar quesséparados，por a que no tienen acceso la carpetaprinciple laaplicación，es decirs es losdecurséscom的儿子tratadas como contenedores […]

React Native和OneSignal第1部分（iOS）

对于React Native，使用One Signal api进行远程通知非常轻松且舒适。 有非常简单的安装和配置步骤。 让我们开始; 创建一个React Native项目 $ react-native init项目 安装一个信号包并链接到项目 $ npm install-保存react-native-onesignal $ react-native链接react-native-onesignal 如果您没有，请注册一个信号帐户。 在XCode中打开您的项目，然后转到“ 功能”标签，然后将“ 推送通知 ”设置为“开” 再次在“ 功能”选项卡中，找到“ 后台模式”并将其设置为“开”，然后选中“ 远程通知” iOS推送证书 访问此页面并使用“自动配置工具”轻松创建证书。 下载.p12文件。 从OneSignal的“所有应用程序”页面中选择您的应用程序，然后转到“应用程序设置”，然后按Apple iOS设置右侧的配置。 上载之前导出的.p12文件 从’react’导入React，{组件}; 从’react-native-onesignal’导入OneSignal； //从节点模块导入包导出默认类App扩展了组件{constructor（properties）{ 超级（属性）; OneSignal.init（“ YOUR_ONESIGNAL_APPID”）; OneSignal.addEventListener（’received’，this.onReceived）; OneSignal.addEventListener（’opened’，this.onOpened）; OneSignal.addEventListener（’ids’，this.onIds）; } componentWillUnmount（）{ OneSignal.removeEventListener（’received’，this.onReceived）; OneSignal.removeEventListener（’opened’，this.onOpened）; OneSignal.removeEventListener（’ids’，this.onIds）; } onReceived（通知）{ console.log（“收到通知：”，通知）; } onOpened（openResult）{ console.log（’Message：’，openResult.notification.payload.body）; console.log（’Data：’，openResult.notification.payload.additionalData）; console.log（’isActive：’，openResult.notification.isAppInFocus）; console.log（’openResult：’，openResult）; […]

致力于React Native初学者〜从零开始React Native

致力于React Native初学者 〜从零开始React Native 拥有Mac机器。 从计算机上的App Store安装Xcode。 是的，您可以安装最新的 安装节点 下载链接-https://nodejs.org/en/download/ 将其安装在您的机器上 打开terminl并输入“ npm -version”将类似于5.xx [其中x是> 0的整数] 键入此命令以转到4.6.1稳定版本“ npm install -g npm@4.6.1” 打开terminl并输入“ npm -version”，它将显示4.6.1。 安装守卫 当心〜如果您不安装watchman，然后再运行“ npm start”，它将显示错误消息，例如 无法启动服务器，请运行以下代码段：sudo sysctl -w fs.inotify.max_user_instances = 1024 sudo sysctl -w fs.inotify.max_user_watches = 12288 建立专案 打开终端 输入commad“ npm install -g create-react-native-app”。 这将安装create-react-native-app，在创建项目的任何路径上都可以使用 在终端上，导航到要在其中创建本机项目的路径 键入命令“ create-react-native-app MyFirstRNProject”项目这将创建一个新的React Native Project，其文件夹名为MyFirstRNProject 运行项目 […]

如果您不知道使用Objective-C在做什么，则为React Native动态更新Javascript资源

对于正在工作的项目，我正在创建一个React Native应用程序。 React Native的好处是您可以从远程服务器加载javascript包（可以说是应用程序的大脑）。 这意味着您可以进行更新和更改，而无需经过App Store批准过程。 不利的一面是，在应用程序实际加载之前，需要一两秒钟的时间来加载捆绑软件。 除非您有一些花哨的Objective-C或Swift“加载”动画，否则它只会显示白屏。 我没有iOS编程方面的经验，所以我决定做第二件事-从设备本地加载捆绑软件。 我能够整理本指南中的大部分内容，但其中一些我必须自己弄清楚。 所以你想动态更新你的React Native App 在工作中，我们最近在应用程序中发布了第一个React Native组件，并且我一直在考虑如何（以及是否… medium.com） React Native为您提供了将JS捆绑软件存储在应用程序捆绑软件中的选项，这几乎为您提供了即时的加载时间。 我可以使用该机制来做我想要的。 首先，我需要检查是否有下载的JS捆绑包，或者是否需要使用应用程序的捆绑包： //这是应用程序本身的文档目录。 NSString * documentDir = [NSSearchPathForDirectoriesInDomains（NSDocumentDirectory，NSUserDomainMask，YES）firstObject]; // filePath代表下载的包所在的位置。 它位于应用程序的documents目录中。 NSString * filePath = [documentDir stringByAppendingPathComponent：@” main-loaded.jsbundle”]; NSURL * codeLocation = [NSURL URLWithString：filePath]; //如果执行路径中没有文件，则使用应用程序包 如果（！[[NSFileManager defaultManager] fileExistsAtPath：filePath]）{ //加载应用程序包的javascript jsCodeLocation = [[NSBundle mainBundle] URLForResource：@“ main” withExtension：@“ jsbundle”]]; […]

反应本地培训

Callstack.io 的 Nader Dabit 和 Mike Grabowski 专业的React Native研讨会和公司培训 。 今天，我们很高兴启动React Native Training。 毫无疑问，React Native在去年特别是在过去的几个月中确实起飞了。 尽管React Native一直是初创企业和中小型企业的可行选择，但我们现在看到越来越多的公司和企业公司正在研究和整合该技术，并使用该框架重写许多现有的本机应用程序。 在本机跨平台移动应用程序开发成本上升和效率下降的刺激下，React Native现在不仅是可行的选择，而且对于大多数用例而言，对于现实世界中的移动应用程序开发而言，它是成倍节省成本的方法。 随着受欢迎程度的提高，现有开发人员需要在尽可能短的时间内快速熟悉该框架。 像任何技术一样，没有比在该领域的顶尖人士上手进行培训更好的方法了，通常是几天之内就学会了数周或数月的时间。 我们将在北美和欧洲提供世界一流的前沿培训和课程材料，专门针对两件事：教室研讨会和现场公司培训。 如果您对我们来到您的城市感兴趣，请给我们发送电子邮件至info@reactnative.training或访问我们的网站reactnative.training。 如果您对专业的Web或移动应用程序开发或咨询感兴趣，请确保查看专门从事React和React Native开发的CallStack.io。 谢谢你的时间！

仅使用iPhone对React Native应用进行编程

我是工作狂 我不会轻易说出来。 暂停开发我的应用程序对我来说是令人难以置信的压力和困难，尤其是在有很多事情要做的时候。 因此，当我发现与父母和女友进行为期10天的欧洲之行时，我非常担心牺牲宝贵的工作时间。 那应该是我对欧洲假期的最初反应吗？ 可能不会。 但是我对自己下定决心，只要有空闲时间或每个人都入睡后，我仍然可以完成一些工作，因此我仍然可以取得一些进步。 这是双赢！ 我仍然可以在意大利和法国旅行并享受我们的郊游，而且我仍然可以完成一些工作。 但是出现了一种新的并发症。 乘飞机的早晨，我发现无法携带笔记本电脑。 现在我们有一个问题。 我知道我必须适应。 您可能会猜到我根据标题决定尝试的内容。 没错，我可以想到的处理任何代码的唯一方法是，如果我在iPhone上找到了一种相对有效的编码方法。 这是我的方法。 进行设置 几次Google和App Store搜索后又经过几次反复试验，我确实在飞机起飞前几个小时就整理好了设置！ 我需要的第一个也是最重要的应用是Github客户端，它允许我执行以下操作： 访问我的应用的私人Github存储库。 在其上添加和编辑任何文本文件。 拉，推和提交我对其所做的任何更改。 我发现有很多应用程序可以让您查看项目，但是只有少数应用程序支持编辑。 在尝试了一些选项之后，我决定使用工作副本。 它满足了我的所有要求，拥有一个性感的用户界面，拥有157个评分，平均评分为4.8星，而且我什至可以免费试用！ 我非常喜欢它，我觉得值得为专业功能付费。 为了使事情变得更好，开发人员仍然非常活跃，并定期发布更新！ 感谢您提供出色的移动Github客户端Anders Borum。 您值得一枚金牌！ App Store链接：https：//itunes.apple.com/us/app/working-copy/id896694807？mt = 8 我的移动设备设置中唯一缺少的部分是自定义键盘，可让您尽快输入代码。 物理智能手机键盘之所以售罄，是因为我们没有时间停下来购买，因此唯一的选择是下载自定义iOS键盘。 虽然我经常下载并尝试新的有趣的应用程序，但我并没有探索许多自定义键盘。 我从未感到有必要冒险超越Google的GBoard（这是最好的）。 我试用了一些开发键盘，并认为CodeKey Pro是适合该工作的键盘。 用最少的偶然键盘按键，对我来说感觉最好。 它还根据您设置的语言提供自定义快捷方式。 就我而言，我使用Javascript是因为我的应用程序是基于React Native构建的。 感谢您在我的移动开发设置上的精采，Abhinav Dimri！ 应用商店链接：https://itunes.apple.com/us/app/codekey-pro-custom-keyboard-designed-for-programmers/id1054647516?mt=8 和繁荣，我准备在旅途中编写代码！ 温馨提示：虽然没有必要，但在旅途中带上外接电池很方便。 “但是阿明！ 您是如何测试代码的？” 我没有 这不是最佳实践，但是我所能做的就是编写代码，仔细检查拼写错误，并在回来时进行调试。 也许可以使用Expo的移动应用程序来运行该应用程序（我不使用Expo，所以我不知道），但是我的React […]

React Native —使用fetch（）的陷阱

使用fetch（）时，您是否曾经被卡住？由于某种原因，尝试从第三方API提取数据时会不断出错？ 即使您按照该教程进行操作，您仍在按照作者编写的方式进行操作？ 我最近陷入困境，直到2016年12月的某个时候才发现这不是问题。这就是我所发现的。 Apple默认为与iOS 9.0或OS X v10.11 SDK链接的应用程序启用应用程序传输安全性（ATS）。 在本机中，这些设置在ios / {您的项目名称}文件夹下的info.plist文件中。 0.28之前的react-native版本默认将info.plist中的命令默认为允许使用以下代码的非安全请求（即http）： 上面的代码允许您的fetch（）命令使用http或https uri。 但是，Apple宣布，在2016年12月之后，所有将此键的值设置为True的应用程序都会触发App Store的自动审核，并且需要证明其合理性。 请参阅此处的Apple ATS文档：https://developer.apple.com/library/content/documentation/General/Reference/InfoPlistKeyReference/Articles/CocoaKeys.html#//apple_ref/doc/uid/TP40009251-SW33。 结果，react native更改了默认的info.plist代码以使其与Apple的ATS策略保持一致，并对该代码进行了结构化，以专门标识将允许进行非安全访问的每个域。 因此，现在info.plist中的默认代码如下所示： 该应用仅允许在没有安全连接的情况下访问localhost ，必须通过https访问所有其他域。 当您要访问未使用https提供服务的第三方API时，会出现问题。 为此，您必须在NSExceptionDomains下添加另一个。 例如，假设您的API位于testapi.com。 您需要打开info.plist并将其添加到异常域列表中，如下所示： 现在，您的应用应该停止引发安全错误，并且fetch（）命令应该可以正常工作。 请记住，每当您的应用程序需要访问不使用安全连接的第三方URL时，请确保通过在info.plist文件中添加域来解决该问题。

在没有CocoaPods的情况下将React Native添加到现有的iOS项目中

由于多种原因，您可能会发现自己想要将React Native添加到现有的iOS项目中而不使用CocoaPods。 CocoaPods是一种用于自动将第三方库添加到项目中的过程的工具，但是没有理由在情况需要时不能手动执行此操作。 注意，这假设您已在本地存储库内的node_modules文件夹中将 React Native下载为依赖项。 有关如何将React Native作为依赖项添加到项目的示例，无非是使用react-native init或UIExplorer项目创建的任何项目（包括在react-native Github存储库的Examples目录中）。 将React Native的子项目添加到您自己的项目中 默认情况下，新创建的React Native项目包括以下子项目。 我建议您在项目中创建一个组，以在Xcode中将这些子项目添加到其中，右键单击它，然后选择“将文件添加到YOUR_PROJECT_NAME ”。 然后，您可以添加React项目本身（位于node_modules / react-native / React中）和所有其他React Native子项目（位于node_modules / react-native / libraries中）。 将二进制文件与库链接 为了编译我们的项目，我们必须将我们的项目目标与第三方的React Native库链接； 在这种情况下，我们的项目目标是“ UIExplorer”。 注意，如果您正在使用位于任何React Native子项目中的类的任何目标，则必须将受关注的库与所讨论的目标链接。 导航到Build-phases-> Link Binary With Libraries添加以下库。 注意，在这种情况下，库是静态链接的。 “其他链接器标志” 如果您尚未设置以下链接器标志，则有必要添加它们以在项目中编译React-Native。 标头搜索路径 如果您使用的React Native版本低于0.40，则有必要向项目添加一些其他标题搜索路径 。 从0.40开始，由于在React Native项目中添加了“ copy headers”阶段，因此没有必要。 这些标头可以包含在系统包含（’s）中，因为标头本身将与其他系统标头一起位于特定目录中。 在您使用的React-Native版本低于0.40的实例中，您需要在项目的标题搜索路径中添加以下内容； 这告诉编译器可以在哪里找到React Native头文件。 注意，添加的路径应相对于node_modules目录。 希望信息对您有所帮助。 […]