Tag: React

为了将来的创业，我要与Swift Swift离婚: 除非你做梦，否则梦想不起作用 2015年，我陷入了无法完成的工作。我一直具有企业家精神，并渴望从事所有具有创新意义的工作，但相反，我却发现自己处于另一面。我每天都要去做重复性的工作，因为我必须这样做，而不是因为我想这样做。那不是我想过20岁生日的方式，所以我下定决心要实现自己的梦想。我的啊哈！时刻在那个黑暗的时期，这也是一个发现的时期。我确切地知道我不喜欢做什么，但是我不确定自己喜欢什么。与同事共度了数个午餐时间的“职业疗法”会议，以阐明我的热情所在。我发现我的企业家精神与从事创新事物的机会之间缺少的联系是创造它们的能力。在一个目前正在用代码重写并且实际上是在IT行业中工作的世界中，我不必说服我就决定必须学习如何编写代码。另一边慢慢地但可以肯定的是，我已经准备好将信念飞跃到移动开发中，因此在2016年，我辞去了工作，接受了移动工程师的职位。从那时起，我就有机会为初创企业和企业构建iOS应用程序。我遇到了很多了不起的开发人员，了解了很多软件开发知识，并且使用编程作为设计和构建事物的创造性渠道获得了很多乐趣。我已经达到了一个点，我可以在一个周末内快速整理内容，以测试新想法… 但是内心深处仍然缺少一些东西…… 分手… 尽管我喜欢在Swift中编写代码并构建闪亮的新iOS应用程序，但在将创意推向世界时，我的技能却非常局限。首先，曾经有一段时间我们认为“移动优先”已成为现实，但是随着时间的流逝，我们见证了人们对应用程序的厌倦程度越来越高。当Android拥有大部分市场份额时，将产品仅运送到一个平台也极为困难。因此，我为将来的创业而深感悲痛，因为我将与斯威夫特离婚两年。我于2017年12月22日剥离了移动工程师的标签，并加入了一家初创公司，成为一名功能更广泛的软件工程师。从现在开始直到我在2018年2月开始新的职位，我将在我的进取时间表上学习React Native，React和Node JS，以便在12个月内交付12个激情项目！

本机与本机: 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动画简介-第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（{ 容器： […]

在React Native上为“ HackerJobs”实现黑暗模式: 我感到很累，但决心完成这个正确的应用程序。我还想了解其他事情。与往常一样，可以在这里找到该应用的仓库。今天的主要重点是完成大部分“黑暗模式”，这是我多年来一直希望在我的应用程序上要做的事情。有很多要介绍的内容，所以让我们开始吧。表明我们处于黑暗模式以前，我必须在应用程序中创建某种“设置”功能。今天，这是由Redux处理的，在InitialState的Settings部分中带有嵌套的true / false布尔值。 const initialState = { selectedTab: “Jobs”, savedJobs: [], settings: { “Dark Mode”: true, “Shuffle Job Threads When Opening”: true } } 事实证明，这非常有用，因为我现在可以访问应用程序的大部分内容，我们需要使用一个简单的MapStateToProps调用来指示其视图状态。 mapStateToProps = (state) => { return { savedJobs: state.get(‘savedJobs’), darkMode: state.get(‘settings’)[‘Dark Mode’] } } 这只是我痛苦的开始。背景资料由于每个应用程序选项卡组件屏幕都是独立创建的，因此需要进行一些工作以统一样式。我创建了DarkStyles JS文件，该文件导出了深色视图所需的各种样式。 export const darkstyle = […]

如何在React Native中使用HealthKit处理后台应用刷新: 目录查询样本数据 HealthKit中的后台传递后台程序刷新事件发射器，用于将事件发送到Javascript 本机模块不能为空 React Native中的桥梁是什么？模拟后台获取事件 EventEmitter的多个实例？由于后台获取事件而启动无头JS 未设置网桥在UI和热重载方面，我很喜欢React Native，但是在React Native中，还有很多简单的事情变得非常困难。主要是关于处理本机功能和React桥。这篇文章是关于我的工作，从开始使用iOS的React Native中的Background fetch和HealthKit逐渐了解本机模块。我正在使用的应用程序具有HealthKit集成，这意味着查询HealthKit数据并积累它们以进行其他研究。功能之一是定期在后台发送锻炼数据。可能有一些库可以执行此任务，但是我总是喜欢手动执行，因为React Native包装器应该不会那么重，并且我可以完全控制执行。本文是关于HealthKit的，但相同的想法也应适用于其他背景需求。还会有很多React Native源代码拼写，阅读和调试起来有些痛苦，但是最后我们学习了很多事情的实际功能。在撰写本文时，我使用react-native 0.57.5 用HKHealthStore查询样本数据关于HealthKit，我们可以通过HKHealthStore轻松查询诸如锻炼和步数之类的样本类型。 HKHealthStore是HealthKit管理的所有数据的访问点，我们可以构造HKQuery和HKSampleQuery来微调查询。让谓词= HKQuery.predicateForSamples（ withStart：startDate，结束：endDate，选项：[。strictStartDate，.strictEndDate] ）让查询= HKSampleQuery（ sampleType：HKObjectType.workoutType（），谓词：限制：0， sortDescriptors：无， resultsHandler：{查询，样本，错误防护错误==无其他{ 返回 } 回调（样本） }） store.execute（查询） HealthKit中的后台传递接下来，通过enableBackgroundDelivery方法进行后台传递调用此方法以注册您的应用以进行后台更新。只要将指定类型的新样本保存到商店，HealthKit就会唤醒您的应用程序。 […]

首次iOS（/ React Native）应用开发人员的故事: 上周，我在App Store上启动了我的第一个应用程序。 Pinx并不多；它提供了一个可供选择的UI，可用于探索您的图钉，除此之外，它不会做更多的事情。但是，无论如何我还是感到非常自豪。这是背景故事… 在过去的十年中，我建立了许多行销网站，并在需要的地方招募了一些自由职业者。自2015年以来，我的大部分工作都集中在网络应用程序上，包括诸如Casillero Del Diablo和ITV之类的家喻户晓的项目。 2016年，我约有三分之一的收入来自于移动应用程序的开发，这些应用程序是由分包商构建的iOS应用程序（包括为Pearson International开发的大型iOS应用程序）和一些跨平台的Cordova应用程序（大部分由我构建）混合而成的。我的收入中约有三分之一来自网络应用程序，这些应用程序主要基于React或Angular。我并不擅长分析我的收入，但感觉很难从营销网站上谋生，因此我越来越依赖于开发Web和移动应用程序。为了促进这种增长，今年初我决定是时候冒险进入开发消费类应用程序的世界了，以便我可以：如果这个想法来了，那就造一些伟大的东西。充分了解开发过程，向客户提供此服务。（值得注意的是，我是一名普通的Javascript开发人员，并且对React有相当不错的工作知识。）首先，我制定了一些规则：它不需要赚钱。它应该尽可能简单。它只需要在iOS上运行即可。启动后应该没有任何服务器可以维护。构建过程不应该超过两个星期。除设计外，没有任何外包或其他财务成本。一路反应本机。我很快就决定建立一个Pinterest客户。恕我直言，Pinterest具有良好的API，但可以改进其应用。对于将Pin固定在桌面上但希望能够远程访问这些Pin的用户来说，更简单的UI将会是一个有吸引力的主张（“我已经固定了一些厨房设计师/美发师/店员的东西”）。在大约42个小时的过程中，我设法学习了React Native，并构建了原型，然后将其发送给了出色的UI设计师Rachael Lopes，非常适合该项目。我给他一个适度的预算，请他尽他所能。我不希望有任何选择，只是一个不错的设计，可以通过iOS11即将进行的设计更改来反映苹果的HIG。我回来的东西更加精致（请参阅此处的整个设计概念）。完整的设计实施需要花费相当长的时间，因此-考虑到项目的目标-我决定将设计缩减一点，但我确实对折衷方案感到满意。在下面，您可以看到线框，Raphael的设计和我的实现。我设法实现了大部分设计，并在接下来的36小时内交付了该应用程序。因此，在大约4个月的时间内，总构建时间为76小时。超出了我最初的目标，但我对此表示同意。当我学习了有关设计，开发和发布过程的堆栈，并且没有破产时。这是我在学习过程中学到的一些知识： React Native使得为前端开发人员构建应用程序变得非常容易。如果您知道React，那么您真的应该对此进行探索。我没有走这条路，但是我希望Create React Native App可以使它变得更加容易。 React Native很棒，但是一直在变化。 Pinx是使用0.43构建的。在撰写本文时，最新版本是0.46，它的开发工作流程明显不同。清除您的最低可行产品。 […]

使用Firebase Cloud功能反应本机推送通知: Google为Firebase提供的新Cloud Functions服务是对其产品的巨大补充，我一直专注于将其用于一项功能：无服务器推送通知。几周前，我开始开发基本的社交网络应用程序，从一开始就实施通知是一个明确的目标（老实说，这是该项目的目的）。但是，我不想麻烦设置服务器来监听Firebase数据。对我来说幸运的是，有了有关如何使用Firebase SDK的一些基本知识，推送通知变得快速而轻松。即使使用此实现，设置推送通知也可能令人生畏，尤其是考虑到所需的设置量。要执行我的实施，必须使用三个Firebase服务： Firebase身份验证（技术上可选） Firestore或实时数据库 Firebase云消息传递（FCM） Firebase云功能使用RNF设置Firebase：不幸的是，Google为React Native用户提供的文档非常有限，即使是最受欢迎的集成包也无法获得详尽的说明，并且功能不一致。我选择使用React Native Firebase（RNF）。幸运的是，它们的安装过程简单明了。安装节点模块，然后链接依赖项。 $ npm install-保存react-native-firebase $ react-native链接react-native-firebase 在控制台中创建Firebase项目，下载GoogleService-Info.plist并将其移至： ios / [您的应用名称]，以便SDK可以连接到您的项目。使用XCode打开项目以确保已正确添加文件。如果它没有显示在边栏中，则只需将文件拖入。然后，打开AppDelegate.m并添加： #import 以及： [FIRApp配置]；在didFinishLaunchingWithOptions：（NSDictionary *）launchOptions方法的开头。设置CocoaPods。生成一个Podfile。有时，Podfile会生成重复的声明，如果报告错误，则将以下内容复制并粘贴到您的声明中：＃取消注释下一行以定义项目的全局平台平台：ios，“ 9.0” 定位“ [您的应用名称]” ＃如果您使用的是Swift或想使用动态框架，请取消注释下一行＃use_frameworks！＃网眼豆荚 pod“ Firebase / Core” pod“ Firebase […]

如何在iOS的React Native中使用react-native-maps设置谷歌地图: 我发现很难在React Native中用react-native-maps实现google maps。他们提供的用于安装的文档很难理解，并且实现起来有些棘手。因此，我想到了分享在ios中实现Google地图的方式。默认情况下，当您在ios中使用react-native-maps时，Apple Map正在加载。因此，如果您不想使用Google地图，可以使用我的方法。即使您以前在ios开发方面没有任何经验，这种方法也很容易实现。在这种方法中，我们使用椰壳足纲。 Cocoapods是Swift和Objective-C的依赖项管理器。如果您没有安装cocoapods，则应该安装它。您可以通过以下方式轻松安装它：须藤宝石安装cocoapods 现在转到您的react native项目的根文件夹，并通过以下方式安装react-native-maps： npm install react-native-maps –save 现在在您的react-native-project中打开ios文件夹并设置您的podfile。要初始化pod文件运行， pod init 然后在编辑器中打开Podfile，例如vim，nano，atom等，并粘贴给定的数据。确保将“ app_name ”替换为应用程序的名称现在回到终端，您可以使用以下命令安装Podfile中指定的依赖项 pod install 现在，使用以下命令在您的xcode中打开项目 open projectname.xcworkspace 从中拖动文件夹AirGoogleMaps 是我们的project / node_modules / react-native-maps / lib / ios / AirGoogleMaps / 进入您的xcode项目。使用项目名称打开文件夹中的AppDelegate.m文件并添加 @import GoogleMaps; 在“ @implementation AppDelegate ”之前和函数（BOOL）中：（UIApplication […]

React Native（iOS）中的配置环境: งองปีที่ผ่านมาคงจะปฏิเสธไม่ได้ว่าการสร้างMobile Applicationนั้นมีความหลากหลามายมากขึ้นativeยึดติดในเรื่อื่องขาษา（母语）ีกต่อีกต่อไป ที่เรียกว่า跨平台อีกด้วยเรียกได้ว่าเทคโนโลยีได้เปลี่ยนแปลง หลายๆอย่างทำให้เราทำงานได้สะดวกขึ้นเร็วขึ้นง่ายขึ้นแต่ยังแฝงไปด้วยความเจ็บปวดในการพัฒนาแอพที่ดีมากขึ้นอีกด้ ย Xamarinหรือ离子框架แต่รแต่นนำมาทั้งหมดReact งนบทความนี้ผมจะมาาในสิ่งที่มีความสำคัญในการสร้าง跨平台应用程序自动化构建工具ต่างๆและที่สำคัญมันต้องทำงานได้ทั้งสองแพลตฟอร์ม ให้อนที่จะเริ่มเราลองมาคิดกันเล่นๆก่อนว่าแอพของเรานั้นต้องการให้建立ใน环境ใดบ้างนdevelopmentนdevelopmentน开发，分阶段，生产เพราะสิ่งเหล่านี้เราจะส่งมันไปบอกJSเพื่อให้จัดการต่อ ิ่มที่ฝั่งiOSิ่มที่ฝั่งนก่อนซึ่งแน่นอนมันจะต้องเริ่มด้วยการ设置ได้ใช้าบางอย่างบนXcode Projectก่อนที่จะBridgeและส่งไปให้ฝั่งได้ใช้ -าเราใช้react-native cliในการgenerate appเราเConfigurationสองตัวก็คือDebug / Releaseเป็นมาตราฐาน แต่ในครั้งนี้เราต้องการ临时环境ด้วย ด้วราเพิ่มเข้าไปก่อนโดยโดองDuplicate Release agingากนั้นให้เราเปลี่ยนชื่อมันเป็น 暂存 ได้เลอง重复发布มาก็เพราะว่าเวลาbuild对nativeนั้นตัวมันเองจะdependentกับconfigบาบอย่างในbuildนั้นๆซึ่งครั้งนี้เราต้องการนขนงอ Configurationอนนี้เราสร้างBuild Configurationเรียบร้อยแล้วเพื่อใช้สำหรับกำหนดbuild configในการ编译ดังนั้นเราจะใช้ 用户定义的设置 ของXcodeในการเก็บ环境ซึ่งผมจะตั้งชื่อ关键ของมันว่า BUILD_ENV เพื่อใช้ใ developmentอ 开发，演出，生产 ส่วนวิธีสร้างให้เรามองหาBuild Settingของ Project แบบนี้ codeาcodeรยังไม่ทราบXcodeนั้นจะแบ่งการเก็บค่าของ设置มางๆไว้สองส่วนคือส่วนที่เป็นระดับProject（ใองง่ายๆคือGlobal）และส่วนที่เป็นTargets（ในระดับschemeต่างๆเพราะเราสามารมถ构建应用程序ได้หลายschemeหลาย配置ProjectนProjectเดียว） บกับฝั่งาเปรียบกับฝั่งAndroidมันก็จะคล้ายกับไฟล์build.gradleของProjectและbuild.gradleของAppนั่นเองครับApp Defineา+นั้นให้กดเครื่องหมาย“ +”เพื่อสร้าง用户定义设置ขึ้นมาใหม่值valueของแต่ละconfigเป็นชื่อของenvต้ราต้องการ（开发，暂存，生产）用户定义的设置ถราสร้างไว้ข้างต้นั้นั้นมันจะไม่สามารถ访问จาก代码ได้โดยตรง （ไม่สามารถเขียนcodeเพื่อดึงkey / val ออก มา） เพราะหน้าที่ของมันเป็นเพียงแค่เก็บConfigที่ใช้ในการbuildเท่านั้น ไฟล์นpนซึ่งผมจะใช้ชื่ราจึงต้องสร้างตัวแปรเก็บไว้ในไฟล์ Info.plist ซึ่งผมจะใช้ BuildEnvironment keyเป็น BuildEnvironment และvalueเป็น $(BUILD_ENV) […]

如何构建React Native应用: 本文将介绍构建React Native应用程序的步骤。 React Native是用于构建移动应用程序的JavaScript框架。 React Native本质上类似于React，除了它使用本机组件而不是Web组件。尽管React Native和React有很多相似之处，但它们在几个方面也有所不同。在React使用合成事件捕获点击，键盘和鼠标的同时，React Native使用onPress（）之类的事件处理程序以及TouchableHighlight和TouchableOpacity之类的可触摸元素来监听触摸并处理触摸事件。这些触摸事件处理程序和元素在提供独特的用户体验（仅移动应用程序可以通过其UI组件提供）方面发挥着巨大作用。由于React Native和React非常相似，以至于React Native可以在Web上运行，这通常是错误的，但是事实并非如此。 React Native应用程序不是混合的，这意味着它们在Web视图上不会像在移动设备上一样运行。这也意味着在构建React Native应用程序时，您需要使用移动模拟器来测试您的代码。对于iOS，请使用Xcode IDE。因此，在开始构建React Native应用程序之前，最好先下载Xcode（如果尚未安装）。你可以在这里下载。此外，开发人员可以集成用于移动设备交互的本机API，包括CameraRoll，地理位置，推送通知和振动。现在，这是构建React Native应用程序的步骤：安装React Native CLI 假设您已经安装了Node，则要在终端中运行以下命令行。如果您要构建跨平台应用程序，请参阅此关于Android SDK的文档。该博客将重点关注iOS。 $ npm install -g react-native-cli $ react-native init ProjectName $ cd ProjectName 当您进入该项目时，您会发现以下项目：1）包含React Native框架的node_modules ，2）包含有助于样式化您的应用程序和Xcode项目的文件夹的ios文件夹，3）由Android构建工具组成的android文件夹（不必担心本教程中的该文件夹），4） index.js和App.js是构成应用程序的起始文件。现在，继续并启动服务器： $ npm开始 Metro Bundler完成JavaScript捆绑后，您应该保持终端处于打开状态，以使服务器在http：// localhost：8081 […]