Tag: react native

React Native中的网络状态

对于我正在开发的应用程序，我需要知道用户何时可以上网。 我立即阅读了文档，并很快找到了解决方案。 React Native的API具有NetInfo ，可为您提供网络状态。 NetInfo.isConnected.fetch（）。then（（isConnected）=> { console.log（’网络状态：’+（isConnected？’online’：’offline’））; }）; 但是，这不适用于iOS（始终返回离线状态）。 经过一些研究，我找到了解决此错误的方法。 NetInfo.isConnected.addEventListener（’change’，（isConnected）=> { console.log（’网络状态：’+（isConnected？’online’：’offline’））; }） 这可以解决问题，但是我在控制台上收到了弃用警告，因此我决定将侦听器更改为“ connectionChange” NetInfo.isConnected.addEventListener（’connectionChange’，（isConnected）=> { console.log（’网络状态：’+（isConnected？’online’：’offline’））; }） 这清除了警告，我得到了正确的结果。 React Native弃用addEventListener（更新于2018年10月2日） 相反，我们将拥有appstate 。 学分： – 来自Noun Project的projecthayat的网络图标

点燃！ React Native样板套件！

React native是一个很棒的工具，但是使用React-Native开始一个新项目根本就不那么出色。 考虑所有需要安装的工具可能会让您头疼。 典型的最佳实践RN应用程序包括redux ， react-navigation ， r18n 。 还有一些更专业的库，例如redux-saga 。 首先，您必须安装它们并使它们协同工作。 这需要时间并且需要努力。 如果您对此感到厌烦，请见面， 点燃 ！ 如上所述，根据您要启动的项目，开始一个新项目可能要花费一些时间。如果我告诉您可以将其减少到几分钟并将剩余的时间用于实际编码，该怎么办。 它比您想象的要简单。 让我解释一下该hack会被点燃，它实际上是做什么的？ Ignite是React Native的生成器，带有样板，插件等。 Ignite团队已发布了第二个版本，称为Ignite CLI 。在第一个版本中，您可以选择一个-Infinite Red的样板-现在，您可以从许多样板中进行选择，还可以根据需要添加独立的插件。 让我们使用Ignite进行第一个React-native应用程序。 Ignite有一个非常简单的CLI，但是首先我们必须安装它。 只需在您的终端中输入即可。 npm install -g ignite-cli 提醒：Ignite CLI必需的纱线已安装在系统上。 安装ignite之后，我们可以创建第一个应用程序。 ignite new MyNewAppName 在创建过程中它将询问您一些问题。 您可以选择是否要安装它们。 等待几分钟，然后您应该会看到类似这样的信息 ———————————————- （）（ ）\）（（/（）\）*） （（）/（）\））（（））（（）/（`）/（（ /（_））（（）/（（（（_）\ /（_））（）（_）））\ （_））/（__））_ __（（_）（_））（_（_（））（（_） | _ _ | （_））__ | […]

为IOS实现本机模块：React-Native

React native是一个功能强大的工具，因为它可以让我们使用本地代码（iOS中为Swift / Obj-C，Android中为Java / Kotlin）并桥接它们以访问我们的react-native JavaScript文件中的本地方法。 当您构建反应本机尚不支持的内容，或者您​​不想使用JavaScript重写某些旧的本机代码时，此功能真的非常有用。 我遇到过这样一种情况，我想为WebView清除所有cookie，但是在react-native中没有任何方法可以实现这一点。 ios Native Module中的示例都在Objective-C中，我想使用Swift来实现。 首先，在YourReactNativeProject / ios / YourReactNativeProject.xcodeproj或YourReactNativeProject / ios / YourReactNativeProject.xcworkspace下打开用于React-native的ios项目，如果您之前安装过Pod。 首先创建一个新的swift文件，并将其命名为项目目录下的CookieManager。 创建Swift文件时，系统会提示您创建桥接头。 在桥接标题内添加导入语句 #import“ RCTBridgeModule.h” 在您的CookieManager.swift文件中 进口基金会 @objc（CookieManager） 类CookieManager：NSObject { @objc func clearCookies（）->无效{ //删除所有缓存 URLCache.shared.removeAllCachedResponses（） //删除任何关联的cookie 如果让cookie = HTTPCookieStorage.shared.cookies { 用于Cookie中的Cookie { HTTPCookieStorage.shared.deleteCookie（cookie） } } } } 不幸的是，我们必须提供一个Objective-C文件，以便将Swift暴露给React Native Objective-C框架。 创建一个新的Objective-C文件，并将其命名为CookieManagerBridge 在CookieManagerBridge.m文件中，您可以公开CookieManager类和clearCookies方法 #import #import“ […]

在小型企业中使用跨平台工具进行移动开发的好处

节省金钱，时间和理智。 Welcome App是iOS和Android上可用的应用程序，用于将新移民或新移民与当地人联系起来。 它于2015年底首次作为网络应用发布，并于2016年初在App Store和Google Play上可用。大多数用户位于瑞典，而一小部分位于挪威。 Welcome的目的是减少新移民融入社会所需的精力，以便他们更快地实现社会和经济融合。 我们的信念是，融入社会的人们也很容易融入经济，这就是我们的战略着重弥合移民与当地人之间的社会鸿沟的原因。 应用程序 Welcome应用程序经历了两个主要版本-第一个版本是使用Ionic构建的，而当前版本是使用React Native的。 但是，这篇文章不是Ionic和React Native之间的技术比较，而是简要提及了在小型初创企业中在移动应用程序开发中使用跨平台开发工具所带来的好处。 应用类型 让我们快速退一步来解释开发前景以及它最近的发展情况。 众所周知，当今最大的两个移动平台是iOS和Android。 为了编写用于这些平台的应用程序，您可以使用其本国语言编写它们，例如iOS的Swift和Android的Java，或将常规网页包装在所谓的Web视图中。 使用其他工具，网络视图可以控制电话摄像头等本机功能。 由于它们既不是纯粹的本机应用程序，也不是为手机制作的常规网页，因此被称为混合应用程序。 因此，总而言之，应用程序可以是网页，本机页面或两者的混合。 回到上一节，Ionic是用于创建跨平台混合应用程序的工具，而React Native是用于创建跨平台本地应用程序的工具。 好处 干 不要重复自己。 对所有知识拥有单一权限是程序员的核心原则之一。 编写跨平台代码的好处之一是，业务逻辑需要在一个地方而不是两个地方进行表达，更新和测试。 更少的代码通常意味着更少的错误。 您甚至可能会争辩说，最好的代码根本就是没有代码。 这意味着更少的时间来实施，维护和调试。 上下文切换 获取和维护特定语言和平台的深入知识需要时间和奉献精神。 此外，在多种语言和平台之间进行切换（例如iOS上的Swift和Android上的Java）可能会很有趣且令人耳目一新，但是对于我们大多数人而言，这当然并非易事。 在平台之间进行重复代码和上下文切换需要花费宝贵的时间，而这些时间可以花在原型设计新功能，测试或改善部署管道上。 功能奇偶校验 对于这种缺乏时间和精力的常见解决方案是雇用或培养专门针对特定平台的人员。 这样做的负面结果是，您最终可能会获得具有不同功能集的应用程序，甚至可能对同一功能使用不同的行为。 成本 而且也不便宜。 在我担任Spotify的工程经理的一部分时间里，招募人才是一项有一定界限的工作，而且没有任何预算限制。 人们说，头数基本上是免费的。 如果我们发现有人认为可以加强我们的团队，那么我们可以自由聘请。 尽管当时这对Spotify来说是正确的策略，但是对于一家初创企业来说，几乎不可能让他们的直属经理表现得像他们的预算无限一样。 相反，预算很可能很紧张，并且使开发人员能够跨平台工作可以潜在地节省很多钱。 要点 像Ionic和React Native这样的工具肯定不是灵丹妙药，但是它们帮助我们在不影响质量或功能的前提下，快速在移动应用程序上进行原型设计，同时又不冒最终在客户中出现不同行为或功能集的风险。 始终坚持非常严格的财政要求。 我们正在寻找更多有才华，谦虚和包容的开发人员，他们希望与我们一起实现我们的愿景。 如果您有兴趣，请联系！

注意杯子

几周前，我去了Google。 Google在苏黎世设有出色的办公室，我认为让他们组织一次技术聚会对于从内部看到它们确实是一个很好的机会。 这是美好而有趣的一天，我很高兴在一个非常友好的环境中遇到好人。 一如往常，在访问大公司时，他们给了我们一些商品。 这次，我们得到了一个带贴纸的袋子，一些电话配件和……杯子！ 上周五早上我在家，我想“现在是在新杯子里喝咖啡的好时机” 所以我在杯子里装了些牛奶，然后放入微波炉中。 两分钟后，我从微波炉中取出杯子，手烧了。 像我将手伸到撒但的烟囱上一样燃烧。 杯子的把手很热，太热了…… 那时，我注意到杯子实际上是金属的，并且由于其形状，其手柄形成了一个电磁拱。 这是一个天线，它接收了微波内部两分钟内的所有微波。 最后，牛奶很冷，可能比以前更冷，并且一天余下的时间我的手都非常疼痛。 我意识到……实际上这并不是我第一次遇到这种情况。 实际上，这是一个非常熟悉的场景。 大公司，不仅是Google，都会免费为您提供很多东西，不仅免费提供杯具，还为您提供框架和工具：React Native，Realm等… 它们都是免费的，一开始看起来很酷。 您可能会像我收到杯赛时一样快乐。 但是下次，请注意杯子… 杯子实际上是一个很棒的杯子，我现在用它来喝冷液体🍻。 问题实际上不是杯子，而是在检查它是否为金属之前使用它，因此它不是喝咖啡的好杯子。 框架和工具也可能发生同样的情况。 在适当的情况下使用React Native，Realm等……它们都是很好的工具，但同时如果不使用它们，则真的很痛苦。 结论 注意杯子 如有任何疑问，请随时在github，twitter或dcordero.me上关注我。

React Native：刷卡，文本输入，动画和手势响应器

这周，我对React Native进行了第一次“认真”的尝试，发现一些令人惊讶的令人讨厌的东西，而文献记载却很少。 我希望这对其他人（或有更好解决方案的人）有所帮助。 让我们从刷卡开始 作为非iOS开发人员，我实际上不知道该模式的正确名称，Apple却喜欢将其命名为UITableViewRowAction。 不幸的是，React Native没有包含如此出色的现成解决方案。 由于缺少正式的解决方案，我跳到coach.js上，找到了希望有人已经编写的组件。 我选择与react-native-swipeout一起使用。 这是一个非常不错的图书馆简单图书馆，我或多或少开箱即用。 （注意：NPM版本已经严重过时，我最初只是使用NPM，但没有，只是使用了仓库） 从那以后，我就将它分叉了，用React Native LayoutAnimations替换了动画以减少依赖性（并且我想它会更高效），并且使手势处理对用户来说更加直观。 布局动画 LayoutAnimations是一个非常酷的库，它使您可以轻松地创建动画，并且或多或少都有文档记录。 您可以像这样创建漂亮的动画： LayoutAnimation.easeInEaseOut（）; this.setState（{elementHeight：1}）; //确保它不为0！ //设置元素的高度取决于this.state.elementHeight，我们都很好 但是请稍等，如果我将elementHeight设置为0会怎样？ 看来React决定进行优化并完全删除元素而没有任何动画！ 但是，如果我想完全隐藏该元素怎么办？ hacky修复实际上还不错。 （您可以在GIF中看到它的实际效果）。 LayoutAnimation.easeInEaseOut（（）=> { //完成动画后，将高度设置为0 this.setState（{elementHeight：0}）; }）; this.setState（{elementHeight：1}）; 只需将动画设置为1px，然后在动画结束后将高度设置为0，使其消失即可。 这样，动画仍然可以正常工作，最后元素仍然可以完全消失。 TextInputs +滑动和手势响应器！ 现在，我认为这是困难的部分。 该应用程序的部分需求当然是即使您在TextInput顶部开始滑动，也能够滑动出删除按钮。 默认情况下，如果点按了TextInput，它将“窃取”并“锁定”该手势至其自身，拒绝将其放弃给其他任何人。 如果您要在Swipeout中嵌套TextInput并期望Swipeout处理滑动，则这是个坏消息。 根本原因是什么？ 这条线在这里。 那条线到底是做什么的？ 好吧，这变得有些困难。 React Native中的大多数手势都建立在Gesture Responder系统之上。 当手势开始时，因此当您的手指第一次与屏幕接触时，它将找到“最深”元素，并询问是否要处理手势（使用onStartShouldSetResponder）。 TextInput总是要求处理输入（禁用时除外），就在用户第一次进行联系时（不知道此点击是否会变成滑动）。 现在，当用户开始拖动手指，并且手势响应器现在意识到这是“移动” /滑动时，它将再次询问元素是否要处理移动手势。 现在的问题是Swipeout想要处理移动手势，但是当Swipeout要求处理它时，手势响应器会询问TextInput（通过onResponderTerminationRequest）是否可以放弃对手势的控制。 由于某种原因，TextInput被编码为始终拒绝请求，因此我的Swipeout将永远无法处理TextInput内的手势。 手势响应器文档中的生命周期段落在手势操作中如何调用不同功能方面也非常全面。 同样的想法也适用于PanResponder（高级手势响应系统），如果您使用PanResponder，请参考GestureResponder的生命周期，因为它的本质是相同的。 […]

解决React Native，macOS Sierra，Xcode 8和Fastlane升级问题

苹果启动了她的最新操作系统。 Xcode已更新为8.0版，第二天所有开发人员都在其开发计算机上修复其工具问题。 听起来很家庭吧？ 这篇小型博客文章描述了解决此问题的方法，因为您可能陷入了React Native应用程序的困境，并在整个互联网上搜索如何解决它:)。 修复React Native的_refreshControl编译错误 首先是将_refreshControl的引用固定为RCTScrollView.m （位于node_modules中的文件）中的refreshControl ： Xcode 8中的基本SDK 9.3 通过从Apple Developers下载页面下载Xcode 7（需要使用Apple ID登录），可以放回9.3版本的iOS SDK（随Xcode 7一起提供）。 现在，将Xcode应用程序解压缩到某个位置，但不要覆盖现有的Xcode（/ Applications / Xcode）安装！ 将正确的平台SDK（右键单击，显示软件包的内容）复制到磁盘上的安全位置，例如：/ Users / /Developer/sdks/9.3/iPhoneOS.platform 。 最后，在当前Xcode应用程序中对此目录进行符号链接： sudo ln -s /用户/ /Developer/sdks/9.3/iPhoneOS.platform/Developer/SDKs/iPhoneOS.sdk /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS9 3.sdk 选择9.3作为基本SDK 打开（如果已经打开Xcode，则需要重新启动）Xcode，转到项目的Build Settings，然后选择9.3。 使用Fastlane修复Xcode 8签名 最后，我们想修复我们的构建过程，使用Fastlane进行设置。 随着Xcode 8的发布，签名已更改，您必须手动设置“配置文件”（请勿打开“ 自动管理唱歌 ”）。 例如，您具有以下体育馆配置： 运行车道时，您可能会看到退出状态：65错误。 这是由Xcode 8设置中的无效签名引起的。 还要确保在项目文件中将所有PROVISIONING_PROFILE变量重命名为PROVISIONING_PROFILE_SPECIFIER 。 现在，在构建目标的“ 常规 ”选项卡中选择正确的“配置文件”： […]

在简单的步骤中使用VSCode进行本机调试。

作为程序员，我们总是想从编辑器中进行调试。这是设置VSCode中的本机调试的四个简单步骤。 步骤1：安装VSCode扩展React Native Full Pack 步骤2：创建Launch.json以调试配置文件的创建。 第3步：确保您已远程启用JS调试并启用实时重新加载 步骤4：Hola最后一步是您要寻找的东西。 调试愉快。 🙂 现在是时候与断点一起摇摆了。 这是相同的android版本。

React Native –这里您需要知道的一切

React Native是一个JavaScript框架，用于为iOS和Android编写真实的，本地渲染的移动应用程序.React Native还公开了平台API的JavaScript接口，因此您的React Native应用程序可以访问平台功能，例如电话摄像头或用户的位置。 React native是移动应用开发行业中的著名技术 REACT Native仅借助JavaScript即可帮助您创建真实而令人兴奋的移动应用程序，而android和iOS平台均支持JavaScript。 只需编写一次代码，即可在iOS和Android平台上使用REACT Native应用程序，这有助于节省开发时间。 REACT Native受到了广泛的欢迎，并且得到了Facebook的支持，REACT Native如今已获得了巨大的社区支持。 React Native建立在ReactJS的基础上，ReactJS为长期以来的最爱AngularJS带来了巨大的竞争。 尽管ReactJS和React Native之间有一些相似之处和不同之处，但下面会提到： React Native是一个框架，可构建UI组件的层次结构来构建JavaScript代码。 它具有适用于iOS和Android平台的一组组件，以构建具有本机外观的移动应用程序。 另一方面，ReactJS是用于创建用户界面的开源JavaScript库。 但是，除了设计接口以外，React Native和ReactJS都是由Facebook使用相同的设计原则开发的。 由于它使用相同的代码来创建REACT Native iOS或REACT Native Android应用程序和Web应用程序，因此您只需要了解HTML，CSS和JavaScript。 让我们在这里看看REACT Native Framework的重要性！ 为什么REACT本机框架很重要？ 借助React Native Framework，您可以为iOS和Android平台呈现UI。 它是一个开放源代码框架，在不久的将来可以与其他平台兼容，例如Windows或tvOS。 由于React Native组件具有相应的权利，因此您可以重复使用这些组件来构建Android和iOS应用程序。 您可以将REACT Native组件合并到现有应用程序的代码中，也可以在插件的帮助下重用基于Cordova的代码。 但是，您现有的应用必须使用Cordova和Ionic代码构建。 React Native开发相对简单，快速且高效。 对于那些具有JavaScript专业知识的开发人员来说，REACT Native是一个不错的选择，因为无需学习特定于Android的Java或iOS的Swift。 React Native是针对UI的，它可以使应用程序快速加载并提供更流畅的感觉。 REACT Native框架近年来得到普及的另一个原因是，该框架可同时满足两个平台的需求，并结束了为移动开发人员选择iOS或Android开发的圣战。 因此，Facebook，Instagram，Skype，Airbnb，Tesla，沃尔玛，百度移动，彭博社，UberEATS Vogue等巨型公司已经将目光投向了它。 此外，使用React Native Framework填补了在关注广阔市场和获利之间的空白。 由于与Android用户相比，iOS用户数量较少，但却产生了更多利润，因此许多行业陷入了困境，他们是应该强调通过构建iOS应用来获得更多利润，还是仅通过Android应用来增强用户实力。 […]

React Native —使用iOS版Safari的快速`console.log / warn / error`

有很多方法可以调试React Native，例如： 面子书 反应堆 React Native调试器 我只想分享我通常使用的一种方法，即使用Safari的 Web Inspector 。 并且不需要远程调试JS。 如何使用它： 对于真实设备：在设置 > Safari > 高级中启用Web Inspector 在macOS中打开Safari ，转到菜单：“ 开发” >“ YOUR_PHONE /模拟器” >“ JSContext” Web检查器将打开并显示您的代码中console.log/warn/error所说的内容 这种方式的缺点和优点： 缺点：非常易于使用，而且超级快。 优点：只能查看console.log / warn / error 谢谢您的阅读！！！