Tag: react native
如何在React Native（IOS）中创建新目标
在本文中，我将向大家展示如何使用React Native为IOS开发创建新目标。 首先，我们将复制基础项目目标，请记住，它还将复制plist文件和架构，我们将在下一步中对其进行重命名。 2.复制目标后，我们将获得目标 ， plist和架构的副本，让它们分别重命名为awesomeProject Dev，我认为这更容易理解。 3.选择我们刚刚生成的新目标，单击“选择 info.plist文件… ”，然后选择awesomePrject Dev.plist文件。 我将选择awesomeProject Dev.plist *可选步骤：不同目标的图标 4.最后编辑目标架构（ awesomeProject Dev ） 选择“编辑架构”。 取消勾选Parallelize Build，在Targets中单击+按钮并添加React 重要 -将添加的React拖到列表顶部，如下所示，否则它将无法生成。 至此，我们可以使用其他目标来构建我们的应用程序了。
我见过天堂。 它是用JavaScript编写的。
为什么React Native是未来 我有一种怪异的软件描述方式。 而且您要么知道我的意思，要么您不知道。 有点奇怪，但是软件界面感觉很重 。 使用界面时，它可能会感到沉重，或者感觉到光线较轻。 两者都不比另一个更好。 这只是取决于。 铬很轻。 Safari感觉较重。 Firefox感觉最重。 可能是胡说八道，但这就是我的感觉。 在我的软件开发生涯中，最重的感觉之一就是在Xcode中使用Swift。 哦，好痛。 延时。 Kanye-West编译器永远不会让您完成。 过去几年，我一直生活在这个笨拙的世界中，以我所知道的唯一方式来构建应用程序：原始，手动，单平台代码。 本地化！ 对？ 当我了解React Native时，我感到怀疑。 一次用JavaScript编写代码，然后在iOS和Android上部署本机应用程序？ -这很烂。 所以我忽略了它。 相反，最终写了两个单独的本机应用程序，一个在iOS的Swift中，另一个在Java / Kotlin的Android中。 这是用JavaScript编写的Web应用程序和基于Electron的桌面应用程序的补充。 （该应用程序是一个加密的跨平台笔记应用程序，因此每个平台上的可用性都是关键。） 这在一段时间内效果很好，但是有困难。 我可以编写Web应用程序和iOS应用程序，但是我对Android毫无经验。 实际上，我一生中从未使用过Android设备超过一个小时。 幸运的是，社区贡献者很乐于帮助构建基础知识，这使我放弃了从头开始编写应用程序的工作，而只是通过增量更改来维护它。 每当需要进行更改或添加功能时，我就需要进入三种不同的代码库，并用三种不同的语言编写相同的代码。 作为一个人，这并不总是很有效。 即使是最简单的跨平台更改，也可能需要一周的时间。 结果是应用程序永远无法拥有美好的事物。 例如，几个用户要求向应用程序添加密码和指纹锁定的功能，这是对具有安全意识的Notes应用程序的非常合理的要求。 但这的实现并非易事：首先，除了输入接口外，还需要密码设置接口。 然后，使用密码对离线用户数据进行加密。 然后，在移动设备上，指定何时应要求输入密码或指纹（立即或退出应用程序时）。 用Swift编写所有这些代码，然后是Java，然后是JavaScript的想法是一场噩梦。 我无法自己去做。 一定有更好的方法。 输入React Native 我必须描述为应用程序维护单独的代码库后的上下文和情感，以便您了解当我开始使用React Native时的愉悦感。 在用Atom （！）编写本机应用程序的第一周，我不屑一顾。 我简直不敢相信这是多么容易。 没有Xcode，没有Swift，可以立即重新加载更改，使用易于使用的JavaScript编写代码-我当时就在天堂。 在编写代码时，我会并排放置iOS模拟器和Android模拟器，并花了一半的时间完全无法相信一切正常。 我从来没有想过， […]
没有捆绑包URL
在为React Native iOS创建生产构建后，恢复开发时可能会出现No Bundle URL Present 为React Native iOS应用程序创建生产版本的说明位于此处的文档中，在“ 构建用于生产的应用程序 ”部分下。 但是，当您回到开发环境时，您将不得不回溯您的步骤，或者换句话说，撤消所做的事情。 手动创建生产版本的两个步骤是 启用应用传输安全 配置发布方案 这些说明非常简单易懂。 但是，取消步骤Enable App Transport Security有点麻烦。 如果操作不正确，您可能会遇到以下错误消息。 在Info.plist文件中正确重置NSAppTransportSecurity时，很容易引起语法错误和类似错误。 我发现将默认代码剪切并粘贴回Info.plist最简单。 我将Sublime用于文本编辑器。 以下是使用React Native创建项目时Info.plist文件中的默认配置。 这是我粘贴回去以消除“ No Bundle URL Present”错误的代码。 NSAppTransportSecurity NSExceptionDomains 本地主机 NSExceptionAllowsInsecureHTTPLoads 有关应用程序传输安全性的详细说明，请参阅Steve Peterson的这篇文章。 Info.plist文件通常可以位于您的React Native项目根目录/ios//Info.plist中。 如果您习惯使用Xcode，则可以从Xcode编辑Info.plist。 最后，此解决方案仅用于手动配置，而React Native CLI不使用。
React Native –从零开始到App Store
计划 应用程式创意 使用的技术 开发环境 应用结构 打字稿介绍 付款介绍 推送通知简介 介绍持久性Redux存储 苹果评论修复 最重要的提示 结论 应用程式创意 一年前，我搬到柏林，面临非常不同的挑战。 每当您需要与当地行政办公室进行互动时，都需要预约。 这就是问题所在，通常最接近的可用约会日期是一个月，但是如果您很幸运并且有足够的空闲时间整天刷新包含可用约会的页面，则可以在下周获得一个。 但这不是我们的方式，我和我的朋友决定将其自动化。 使用的技术 反应本机 React Native· 使用React构建本机应用程序的框架 使用Reactfacebook.github.io构建本机应用程序的框架 打字稿 TypeScript –可扩展的JavaScript。 TypeScript为您带来了可选的静态类型检查以及最新的ECMAScript功能。 www.typescriptlang.org Redux 自述文件·Redux 如果您来自Flux，则需要了解一个重要的区别。 Redux没有… redux.js.org I18n i18next / react-i18next react-i18next-国际化的反应正确。 使用i18next i18n生态系统。 github.com “ redux-persist”模块 rt2zz / redux-persist redux-persist –坚持并补充redux存储库 github.com 后端API的Node.js（本文未涵盖） 二手平台功能： 推送通知 应用内购买（可续订） 开发环境 React […]
快速到React Native —第1周
看，纸牌屋 我对版本的恐惧最终成为事实。 我开始的入门项目（遵循React Native文档）使用了旧版本的Expo和React Native。 因此，我更新了所有内容，并花了60分钟来跟踪问题，现在当我在Atom中工作时，流程不再起作用。 所以我必须手动运行Flow … 并不是说iOS开发从来没有这样的问题，但是我觉得这些事情发生的频率降低了。 道具和状态vs实例let和var 如果我明白这一点，我很确定prop等同于声明为let的实例变量，而state等同于var声明的实例变量。 学习新平台始终是一个挑战。 我可以接任何分支：-) 流程：如果很重要，为什么不使用它 好的，这是我这周的咆哮。 如果Flow被认为是使使用JavaScript编写的代码安全并且是React Native的推荐解决方案的原因，那么为什么它是如此糟糕？ 以及为什么它在React Native框架代码上返回错误。 为什么要使其始终如一地工作是一个主要的难题…… 如果Flow标记了一些错误，React Native背后的团队至少可以同意不发货。 现在，我有24个错误，这些错误令Flow Flags我无能为力。 因此，当我运行Flow时（手动，请记住，由于某种原因它不再在Atom中运行），我必须仔细检查所有内容，以确保不会在我的代码中弹出新内容。 这很痛苦，并且会导致出现错误，因为我最终变得懒惰并错过了新的错误…… 如果“应该”使用Flow，那么为什么RN入门站点上的代码示例未添加Flow装饰？！？！？ 我不得不谷歌如何获取该代码以通过流程验证。 当然我学到了一些东西，但是来吧…… 通天还是反应？ 我应该选择哪个 在教程之后，您最终添加了一些工具和命令，这些工具和命令只是为了到达那里而并非总是完全理解。 是的，这通常意味着在将来的某个时刻，您将最终了解您的实际工作以及原因。 因此，Atom有时表明我有两个“不兼容的程序包”，并带有一条错误消息（确实看起来有人对此进行了思考，这很棒），但我仍然感到困惑。 您告诉我阅读此内容后应该做什么： language-babel检测到存在不兼容的名为“ react”的Atom软件包。 建议您禁用“ react”或“ language-babel” 原因： Atom社区软件包“ react”（不要与Facebook React混淆）可以为提供JSX自动缩进功能的atom方法打补丁。 当它检测到JSX范围而不考虑所使用的语法时，它会尝试自动缩进由language-babel突出显示的JSX。 由于language-babel还尝试使用标准atom API进行自动缩进，因此会造成潜在的冲突。 那么我应该踢哪一个呢？ 这让我想起了Windows vs Apple。 Windows提供所有选项，Apple会为您预选。 我更喜欢Apple是有原因的，我通常不想强调所有选项。 所以问题仍然存在，我应该保留哪一个？ Flex与自动版式 […]
如果端口8081被其他东西占用，则需要作出反应本机的工作
免责声明：我已经针对应用程序的ios构建测试了这些步骤。 可能是android版本需要一些调整。 像大多数其他人一样，我的McAfee防火墙使用端口8081…因此，react-native会抱怨以下消息： 端口8081已被使用，打包程序未运行或运行不正确 由于我不想禁用防火墙，因此我在github和stackoverflow上寻找解决方案。 最常用的解决方案是在项目中的所有文件（包括node_modules）中进行查找/替换。 完成该操作后，我看到了一些进展，因为仿真器显示它正在尝试从新端口（本例中为8082）加载代码。 确保还要在package.json中进行更改： 另一件事是，我注意到地铁捆扎机似乎对此卡住了： 捆绑`index.js` [未开发的开发项目]░░░░░░░░░░░░░░░░0.0％（0/1） 在github上搜索了更多内容后，我发现此注释建议执行以下操作： 纱线去除巴别针预设反应本机 纱线添加babel-preset-react-native@2.1.0 完成此步骤后，我终于设法使应用程序运行：
带有Cocoapods和react-native-maps的Google Map-iOS
最近几天，当我试图将react-native-maps集成到用于传输连接Bileto的新移动应用程序中时，我正在寻找将其与Cocoapods集成的方法。 不幸的是，好的和新的教程很少。 通常，您会发现大约一年的文章，因此react-native-maps项目中只有READMEright。 这就是为什么我决定写两篇文章将Android和iOS上的Google Maps集成在一起的原因。 这是iOS部分。 让我们从头开始。 我们将使用React Native命令行工具创建一个新项目。 如果您从未安装过，只需输入npm i -g react-native-cli 。 然后导航到我们要在其中创建项目的文件夹。 要生成新的一种类型的react-native init MapExample 。 此命令将创建一个新的全新安装的React Native应用程序。 现在，只需转到项目文件夹。 就我而言，是cd MapExample 。 然后在这里运行react-native run-ios命令。 此命令将启动应用程序构建，并在模拟器上首次运行它。 我们将关闭模拟器以进行下一步… 现在是时候安装react-native-maps了。 使用yarn add-react-native-maps或npm install react-native-maps命令运行地图软件包安装。 安装完成后， 您将无法借助react-native link react-native-maps 链接软件包。 整个软件包的依赖项将通过Cocoapods安装。 如果您没有安装它们，只需键入gem install cocoapods （您可能需要添加sudo权限）。 首先，我们需要进入ios文件夹cd ios 。 使用pod init初始化cocoapods及其初始文件是必要的。 现在，使用收藏夹编辑器打开Podfile cocoapods文件。 对我来说，它是VSCode，所以code Podfile 。 您看到的文件应如下所示。 […]
Cara integrasi React Native Dengan Swift Dan CodePush（Panduan lengkap）-包。 2
Seteleh lama gak nulis di beberapa minggu terakhir karena aktivitas yang padat😌，akhirnya kali ini gua sempetin lanjutan dari artikel sebelumnya。 Ini bakalan singkat dan ga bertele-tele，cukup singkat karna sisanya cuma cara积分密码推送文件Swift kita。 安装Codepush Kita Pakai react-native-code-push yarn add react-native-code-push 喀麦店林克项目计划，印度塞拉利昂共和国 react-native link react-native-code-push Perintah tersebut akan menambahkan文件文件yang dibutuhkan secara otomatis。 dani untuk memastikan lagi，bisa kita […]
设置推送通知di React Native dengan react-native-fcm
Halo Bosqu ..嗯… Semoga liburan nya menyenangkan ..无论如何，心情ggi lagi serius pas nulis ini，jadi kayaknya engk akan banyak becanda。 好吧，《行情》（Siapa yang menguasai dunia informationnia，Dialah sesungguhnya yang akan menguasai dunia）。 顺便说一句，FYI ini gw kutip dari kompas.com bukan dari javhihi.com。 好吧，komunikasi emang penting si，sampai ada pekerjaan khusus yang namanya PR，GRO等di tempat2 pijit terdekat。 Karena berbicara dengan orang lain […]
React Native调试简介-iOS
优秀的软件开发人员还必须是出色的调试器 作为软件开发人员，我们产生代码并引入错误。 不是故意的，但是我们做到了！ 当涉及调试本机应用程序时，特别是作为初学者，这是真的！ 由于Xcode不支持调试javascript代码，因此即使您是经验丰富的iOS开发人员，您也将难以调试React代码。 因此，在本文中，我将逐步介绍如何使用不同的工具在react-native应用程序中调试javascript代码。 使用Chrome控制台进行调试 这是调试本地应用程序的最简单，最常用的方法。 Chrome Dev Tools具有标准的调试功能。 它将显示所有控制台输出，使用断点，调试器暂停等。 在iOS模拟器或设备中运行您的应用程序 在iOS模拟器上按Command + D或摇动物理设备，这将打开以下应用程序内开发人员菜单， 3.点击“远程调试JS”。 然后，Chrome调试器将自动在http：// localhost：8081 / debugger-ui打开 4.启用“暂停捕获的异常”以获得更好的调试体验。 5.按Command + Option + I打开Chrome开发者工具，或通过Chrome菜单View > Developer > Developer Tools打开它。 并确保您在Console选项卡上 6.现在，您应该能够看到调试控制台。 7.现在，无论何时执行console.log语句，它都将出现在“ Console选项卡中。 使用Visual Studio代码进行调试 安装React Native Tools扩展。 单击视图栏中的调试图标，然后单击齿轮图标以选择添加配置。 从配置下拉列表中选择React Native调试环境，以便创建新的launch.json文件。 要启动调试会话，请从配置下拉菜单中选择“ Debug iOS ，然后单击“开始”按钮（或按F5键） 5，现在您可以在代码中放置断点并在模拟器上运行，请确保Debug JS Remotely启用Debug JS Remotely 如果您在任何浏览器标签上都运行了chrome调试器，则需要关闭该调试器。 其他VS调试器将无法正常工作。 […]
