Tag: react native

使用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 […]

迅速反应本机-第3周：变得舒适

上周我提到了Storybook，不得不说我很高兴遇到了这个工具。 我发现使用屏幕或组件的功能非常好，我不必从应用程序的主屏幕转到控制该屏幕的任何屏幕即可测试该屏幕。 现在我有了这个设置，我很高兴，但是这花了我太多时间才能开始运行。 其他迅速的开发人员会告诉我这是游乐场的用途。 没错，我只是从来没有上过游乐场，所以我的想法是让我的屏幕和控件在所有不同的状态下显示正在运行的目录。 现在，尽管此工具很棒，但我仍然遇到问题，需要花费更长的时间，我认为他们应该这样做。 我仍然无法正确显示iPhoneX布局。 获得一个复选框以呈现我想要的方式需要我创建自己的组件，因此需要更多时间。 使导航正常工作也很痛苦。 我首先尝试使用推荐的Navigator框架，只是转到WIX提供的React Native Navigation。 那也花了我一段时间。 所以现在我必须在3个不同的地方查看文档（React native，React Native Element和React Native Navigation）。 是的，我可以在浏览器中查看所有内容。 但这绝对不是Xcode的良好体验，因为Xcode的经验是从Apple查看集成在我的代码或浏览器中的Apple文档中的99％。 而且，这三个地方的文档具有不同程度的完整性和准确性。 因此，您了解情况了，我希望事情进展得更快。 我知道这对我来说是一项新技术，因此花了一些时间来学习它。 但是鉴于我已经知道nodejs堆栈，所以我不禁要告诉我，对于没有JavaScript经验的人来说，这将是艰难的攀登。 上一集： Swift to React Native —第2周：将此绑定 这周是我感到进步的第一周。 感觉很棒，但是那是…… medium.com 您要创建一个移动应用程序吗？ 您是否正在组建团队来首次构建移动应用程序，并为所有复杂性感到不知所措？ 然后随时与我们联系，我可以为您提供帮助。 查看我的网站以获取更多信息。 在React Native中管理样式 React Native是一个框架，它允许熟悉JavaScript的全栈开发人员编写功能丰富的… medium.com React Native Navigation –适用于iOS和Android的真正本机导航 反应本机导航–适用于iOS和Android的真正本机导航 React Native Navigation –适用于iOS和Androidwix.github.io的真正本机导航 shanalikhan /代码设置同步 code-settings-sync […]

React Native iOS应用中的多种方案和配置

React Native Schemes管理器 显然，由于packenger从节点模块目录创建Xcode项目引用时，packenger的工作方式，React-Native在处理Xcode构建配置和方案方面存在问题。 这可能是一个问题，因为您需要在应用程序中处理多个环境…… 幸运的是，您可以在React Native iOS应用中轻松处理多种方案和配置。 今天，我将撰写有关React Native Schemes Manager的工具，我发现该工具可用于解决React Native中的这一固有问题。 希望对您有所帮助。 1.添加新的构建配置 根据您的需要添加并命名新的构建配置。 您将通过克隆当前的“发行版”或“调试配置”来完成此操作。 在此示例中，我们将创建两个配置StagingQA的Debug副本和ProductionQA的Release副本： 2.为新的构建配置添加方案 如果您为每个构建配置创建模式，将更易于处理不同的包ID或显示名称或应用程序图标。 只要确保您创建的架构是“共享的”，并且在Run and Archive具有正确的构建配置参考即可。 有两种方法可以最快地创建一个新模式，即option(⌥) + click播放符号，然后复制原始模式。 您可以根据需要命名这些架构。 再次确保每个模式在Run和Archive中都具有正确的构建配置参考，并且已检查 “ Shared bod 。 3.安装React Native Schemes Manager 根据您的包管理器的偏好使用： yarn add –dev react-native-schemes-manager 要么 npm install –save-dev react-native-schemes-manager 4.更新您的package.json 按照React Native Schemes Manager的安装说明，您需要： 将 xcodeSchemes 部分 添加 […]

带有滚动功能的React Native中的可折叠手风琴样式导航

我发现在React Native中找到一个好的，高性能，手风琴风格的导航组件有点困难，这不太复杂。 Oblador有一个相当不错的产品，但是它没有考虑滚动视图中的项目。 我希望能够做的是在用户设备的顶部设置适当的手风琴菜单项，并显示其子类别菜单项。 我在Expnent的Codepen式Snack应用程序中构建了它的精简版，并在此处将其作为开放源代码git repo的更全功能版本。 它是使用标准的react native入门指南构建的，因此您可以遵循这些指示来启动和运行项目。 该代码有很好的注释，但实际上它是由三个部分组成： scroll accordion ，其中包含包含subcategory links touts 。 当您单击某个功能区时，该功能区将滚动到用户设备的顶部，而不管他们在scrollView中的滚动位置如何，并在子类别链接列表中添加动画效果。 棘手的部分是尝试使代码保持动态，以便您的吹捧者可以是任意高度，并且子类别链接的数量可以随类别的不同而变化。 本示例尝试通过在必要时使用PureComponents来执行此操作，并且仅在初始布局上进行尺寸计算，以便在实际单击tout时，我们要做的就是随着子类别链接容器的动画高度和查看滚动。 如果单击另一个提示，我仍然需要实现自动关闭上一个子类别链接容器的功能。 除此之外，还有代码。 让我知道您是否有任何疑问或改进。 “使用严格” 从’react’导入React，{组件}; 从’react-native’导入{AppRegistry，Animated，Dimensions，Easing，Image，Text，View，StyleSheet，TouchableOpacity，ScrollView}； const categoryLinks = [//为简单起见，我们对所有tout使用相同的类别链接集 {标签：’Subcategory1′}， {标签：’Subcategory2′}， {标签：’Subcategory3′}， {标签：’Subcategory4′}， {标签：’Subcategory5′}， {标签：’Subcategory6′}， {标签：’Subcategory7′}， {标签：’Subcategory8′}， {标签：’Subcategory9′}， {标签：’Subcategory10′}， ] const categoryTouts = [// touts是保存我们链接的可点击图像项 {image：require（’./ assets / images / image01.jpg’），标题：“ Category1”，链接：categoryLinks}， {image：require（’./ assets / images […]

反应本地人— Mobil UygulamaGeliştirme

Mobil tarafta IOS 客观目标C veya Swift， Androidtabanlıtelefonlara ise java dili ile本机语言。 Bununyanında，javascript，使用JavaScript进行浏览。 在当地居民中反应当地人’denbahsedeceğiz。 反应Native facebooktarafındansunulan bir mobil uygulamageliştirmeçatısıdır。 IOS ve Androidtarafındanative kodlaraçevrilir。 Böylecetek kod ile birdençokplatforma mobil uygulamageliştirebilirsiniz。 Neden React Native’ıseçmeliyim吗？ 反应本机gerçektennative’dir。 Uygulamlarınızıuzaktangüncellemeimkanısağlar。 脸谱gibibüyükbirdestekçisivar Webtabanlıuygulamageliştiricileriçinöğrenmesürecikısadır。 Uygulamageliştirmesüresinative’egörekısadır。 反应本地’de uygulamaperformansınıarttırmakiçin组件方法larınındoğrukullanımıoldukçaönemlidir。 1个构造函数 Başlangıç国家’lerinitanımladığımızalandır。 Sayfa ilkyüklendiğindeburayadüşer。 2分量WillMount 组件ekranıyerleştirilmeden渲染’danönceçalışmaktadır。 状态集etmekiçinuygundeğildir。 设置状态çağırıldığındansayfasürekli渲染edecektir。 3渲染 SayfaüzerindebulunantümUI komponentlerin hepsi bu alanda bulunur。 Bir component’inçalışmasıiçindiğermethodlar […]

React Native和Flow入门

向您的React Native应用程序添加静态类型。 Flow使我们能够轻松地向我们的JavaScript添加静态类型检查。 Flow将帮助您防止错误，并可以提供更好的代码文档。 许多React Native文档和源代码已经使用了流程，因此从来没有比现在更好的时间开始使用它了！ 在本文的结尾，我们还将SublimeLinter-flow添加到Sublime Text中，以便在编辑器中进行实时类型检查！ 向React Native添加流 首先，让我们创建一个新的React Native应用程序： 反应本机初始化流程 .flowconfig文件是放置特定流配置的位置，类似于.eslintrc文件。 新的React Native项目带有.flowconfig用的预配置.flowconfig文件。 在本教程的其余部分中，我们将使用此默认配置。 如果您想自定义配置或了解有关配置的更多信息，请查看文档。 现在，我们需要使用flow-bin软件包安装flow。 cd进入根目录，然后在文本编辑器中打开.flowconfig文件，并查看底部以查看您的应用程序需要哪种版本的流： 对我来说，它的版本是0.33.0 ，所以它将成为我安装并另存为dev依赖项的版本。 纱线添加flow-bin@0.33.0 –dev 要么 npm我flow-bin@0.33.0 –save-dev 在本教程中，我们将按照文档以及我在社区中与大多数人交谈的建议在每个项目的基础上安装流程。 首选安装方法是按项目进行安装的原因是，不同的.flowconfig配置需要使用不同版本的流，如果在全局范围内安装它，则在很多情况下将无法正常工作。 要了解有关全局安装的更多信息，请在此处查看文档。 现在已经安装了正确的流版本，我们需要做的最后一件事是设置一个简单的命令，以便我们在每次键入check时都可以运行。 对我来说， npm run flow非常有意义，因此让我们打开package.json并将流程脚本添加到我们的脚本中： “脚本”：{ “ start”：“节点node_modules / react-native / local-cli / cli.js开始”， “ test”：“开玩笑”， “ flow”：“流” }， 现在，我们可以转到命令行来首次启动流服务器： npm运行流程 我们应该得到这个： 从文档： 使用Flow服务器 对于大型项目，您可能只希望Flow在文件更改时逐步检查文件。 […]

运行iOS版本-第3部分，React Native DevOps指南

TLDR： 为三种构建类型配置一个React Native iOS项目：开发，登台和发布。 自定义构建行为以实现Xcode的可重复性，然后使用Fastlane简化流程。 使用Jenkins自动化Fastlane构建流程。 简介| 设置| 预建| iOS | Android | 詹金斯| CodePush | 测试中 概要 概念— Xcode 构建类型和目的地 按键和配置文件 管理Xcode 构型 方案 构建设置 建立阶段 新建系统 概念— Fastlane 车道 选件 元数据/ App Store 詹金斯 演练 创建登台配置 创建开发，暂存和发布方案 编辑构建选项和阶段 查看签名配置 添加Fastlane车道，选项 添加iOS Fastlane元数据 创建詹金斯职位 测试工作 系统总览 概念— Xcode 构建类型和目的地 苹果肯定喜欢使应用程序开发复杂化。 如本系列的第1部分所述，iOS的命名构建类型比Android多得多。 复杂性的主要驱动因素是供应配置文件。 每个配置文件都会限制可以运行您的应用的合格设备的数量。 发布版本只能在设备上运行，并且必须从beta或prod应用商店中安装。 […]

快速反应本机：立即开始使用JavaScript学习本机iOS开发！

本书是关于React Native进行移动iOS开发入门的指南。 您可以在https://github.com/azat-co/react-native-quickly中找到源代码和手稿。 您可以在此处或在reactnativequickly.com上在线阅读本书，或者， 如果您喜欢视频 ，可以在Node.University上观看项目视频：http：//node.university/courses/react-native-quickly。 在本书中，我将向您介绍React Native，以进行本机移动iOS和Android开发……并迅速进行。 我们将讨论诸如 为什么React Native很棒 为iOS设置React Native Development Hello World和React Native CLI 样式和Flexbox React Native UI的主要组件 将模块导入Xcode项目 项目：计时器 项目：天气应用 这本书是关于快速开始使用React的，而不是关于React Native的，从技术上讲，它是一个单独的库（有些甚至可以称为框架）。 但是我认为在与React一起进行Web开发的八章工作之后，通过利用这个很棒的库将我们的知识应用于移动开发会很有趣。 您会惊讶于您已经从React中学到了多少React Native技能。 使示例过于复杂或过于简单，从而使它们不现实且无用，总是存在一个平衡。 在本书中，准备构建两个移动应用程序：Timer和Weather应用程序。 Weather应用程序具有3个屏幕录像，您可以在Node.Unversity上观看。 他们将引导您完成“天气”应用程序。 [边注] 阅读博客文章固然不错，但观看视频课程则更好，因为它们更具吸引力。 许多开发人员抱怨Node上缺乏负担得起的高质量视频材料。 观看YouTube视频让人分心，疯狂地花500美元购买Node视频课程！ 去看看Node University，它在Node：node.university上有免费的视频课程。 [旁注结尾] 项目的源代码（以及提交问题/错误的手稿）在https://github.com/azat-co/react-native-quickly存储库中。 请享用！ 为什么React Native很棒 React Native应用程序不同于混合应用程序或所谓的HTML5应用程序。 如果您不熟悉混合方法，那就是将网站包装在无头浏览器中的时候。 无头浏览器是没有URL栏或导航按钮的浏览器视图。 基本上，开发人员使用常规的网络技术（例如JavaScript，HTML和CSS）以及可能的框架（例如jQuery Mobile，Ionic，Ember或Backbone）来构建响应式网站。 然后，他们将其与该无头浏览器一起打包为本地应用程序。 最后，您可以跨平台重用相同的代码库，但是通常缺乏使用混合应用程序的经验。 与本机应用程序相比，它们通常不那么敏捷，或者缺少某些功能。 混合应用程序最受欢迎的框架包括Sencha […]

解决React Native项目中的CocoaPods问题

如果您有以下问题， “我将React-Native更新到最新版本，而CocoaPods无法解决依赖关系…” “ CocoaPods找不到Pod’Folly’的兼容版本……” “`Pod install`不会安装所有依赖项，无法安装GLog …” 那么你来对地方了。 在此博客中，我将介绍一些步骤/答案/方法/方法来解决与React Native项目中的CocoaPods有关的问题。 开始吧… 1.配置CocoaPods依赖关系 确保已阅读有关配置CocoaPods依赖项的官方文档。 与现有应用程序集成·React Native 从头开始新的移动应用程序时，React Native很棒。 但是，它对于添加… facebook.github.io 也很好。 从官方文档开始总是很好。 特别是与与第三方依赖项（例如GLog和Folly）有关的错误，重要的是您的podspec正确。 因此，请确保将您的Podfile与官方文档中指定的Podfile进行比较。 2.更新pod存储库 您的本地Pod存储库可能已过时。 什么？！！ 因此，CocoaPod维护spec-repo的本地克隆。 此仓库基本上是所有可用豆荚和版本的列表。 它位于〜/ .cocoapods / repos中。 因此，请确保在尝试任何其他操作之前先更新此存储库。 您可以通过运行以下命令来更新它， $ pod repo更新 官方文档在这里 。 3.验证Xcode的活动dev目录路径 开发人员通常会使用多个版本的Xcode，因此他们不得不在不同版本之间不断跳来跳去，在此过程中，他们忘记了更改Xcode的活动开发人员目录。 建造大型物件时，可以忘记小型物件。 对？ ……不！ 那么如何解决呢？ 首先通过运行检查Xcode的活动开发人员目录， xcode选择-p 这应该打印活动的dev目录路径/Applications/Xcode.app/Contents/Developer 。 如果您以不同的方式命名您的Xcode应用程序，则可能会有所不同，但理想情况下应该是这个。 xcode-select控制xcrun，xcodebuild，cc和其他Xcode和BSD开发工具使用的开发人员目录的位置。 无论如何，如果您选择的xcode版本与此命令显示的版本不同，则应通过运行来切换活动的dev目录， sudo xcode-select -s […]