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 Native在本地移动平台上提供了不错的抽象水平，并允许我们在不同平台上共享几乎整个应用程序代码库。 在我们的例子中，它几乎统一了所有本机API，除了极少数-推送通知（但我们仍然可以共享一些代码）和InAppPurchases（完全不同）。 只要您不接触iOS或Android的平台特定功能，就可以使用android模拟器在任何操作系统上工作，否则，您需要选择合适的环境。 就我而言，这是iOS应用程序，这意味着我需要配备Mac OS的机器和配备iOS的手机。 您肯定需要一部电话，因为它无法在iPhone模拟器上使用外部推送通知。
应用结构
项目层面
- android —本机Android应用程序项目
- 工件-我们的本机应用程序的源代码，从打字稿转换为常规javascript。
- ios —本机iOS应用程序项目
- node_modules —节点模块🙂
- src —我们的本机应用程序的源代码
源代码级别
- 通用-通用功能，可以在应用程序的任何屏幕上使用。 最有趣的嵌套文件夹是“服务”。 在这里，我们有一些本机平台功能的包装，而本机平台功能并未通过react native完全统一。
- 屏幕-类似于Web应用程序中包含我们应用程序所有屏幕的“页面”。 在这里，我们有基于Redux的应用程序的常用文件，如“ actionCreators”，“ actions”和“ reducer”。
- i18n.calendar.ts和i18n.ts-日历和应用程序本身的翻译
- index.base.tsx —两个应用程序（Android和iOS）的通用入口点
- index.ios.tsx和index.android.tsx-用于响应本机生成器的特定于平台的入口点
- autoMergeLevel2.js —修改了“ redux-persist”模块的缓存无效器。
打字稿介绍
我找到了一篇不错的文章，关于在react native应用程序中添加打字稿，我只想与您分享并添加一些评论。
使用TypeScript响应本机
将React Native项目转换为TypeScript medium.com的完整指南
首先，我将index.ios.tsx和index.android.tsx的公共部分提取到index.base.tsx中，以防止在两个地方复制相同的代码。
第二个改进-我添加了构建步骤，用于将图像从“ src”文件夹复制到“工件”，因为打字稿编译器无法为我们移动图像。 此解决方案需要cpy模块
应对图像的命令：
“ png”：“ cpy’** / *。png”../artifacts/’-cwd = src-父母”
就我而言，它只是“ png”，但是您可以复制所需的任何内容，它将保留文件和文件夹的结构以及嵌套。
现在，我的构建命令如下所示：
“ build”：“ npm运行清洁&& npm运行png && npm运行tsc —”
付款介绍
您可以使用react native和iOS玩，但是如果您需要引入应用购买或将通知推送到应用中，则需要购买Apple开发者帐户。 每年将花费您99 USD🙁
收到后，您可以使用Xcode将以下功能添加到您的应用中：
在这里，我还想向您推荐有关iOS自动续订的精彩文章，但是它也可以用于其他类型的应用内购买。 本文本身不是关于react native的，而是为如何准备开发人员帐户提供了很好的指南。
应用内购买：自动续订订阅教程
苹果在WWDC 2016之前宣布了一项新功能：自动续订订阅。 除了给您带来的明显好处之外， www.raywenderlich.com
现在，您的开发者帐户已准备就绪。 您可以将付款添加到应用程序中，我建议使用此库。 它有很好的例子，易于实现：
chirag04 / react-native-in-app-utils
react-native-in-app-utils –用于处理应用程序内付款的react-native包装器 github.com
完成后，您可以创建沙箱用户并测试InAppPurchase。 要创建测试用户，您需要转到https://itunesconnect.apple.com→“用户和角色”→“沙盒测试器”并添加一个。
现在，您可以在设备上使用此帐户：
推送通知简介
实际上，关于推送通知没有什么特别的，只有四个步骤：
- 获取真实设备，无法在iPhone模拟器上获取推送通知令牌
- 像往常一样，生成用于开发和生产的所有必要证书，我想向您推荐能逐步展示整个过程的优质文章
为iOS推送通知生成APNS证书
Apple推送通知服务（通常称为Apple Notification Service或APNS）是一种平台服务… medium.com
3.使用“ react-native-push-notification”模块将推送通知添加到您的应用
zo0r / react-native-push-notification
react-native-push-notification – React Native本地和远程通知 github.com
4.唯一重要的一点是推送通知令牌。 令牌可能会不时由操作系统更改，并且要获取最新的通知令牌，您可以在应用程序启动时请求它。 因为用户已经批准过一次，所以它不需要用户每次都批准您的应用程序推送。
介绍持久性Redux存储
通常，在移动应用程序中，您必须在用户会话之间存储一些数据。 在burgeramtApp中，我需要存储有关用户订阅的信息，因为当用户每次打开您的应用时，当您自动请求购买时，Apple不会喜欢。
在基于Redux的应用程序中执行此操作的最简单方法-将应用程序的整个状态（或部分状态）保存在手机存储中，并在应用程序启动时将其还原。 它需要少量更改，并且不会更改常规应用程序流程。 为此，我选择了“ redux-persist”库
rt2zz / redux-persist
redux-persist –坚持并补充redux存储库 github.com
当我决定将此库引入我的应用程序时，它们的文档已经过时了（仅适用于版本2），因此我花了几天的时间调试“ redux-persist”并尝试了解如何正确使用它。 但是现在文档已更新，您只需要遵循它即可。
顺便说一句，如果由于某种原因您在redux存储中使用了immutable.js，则需要使用“ redux-persist-transform-immutable”
rt2zz / redux-persist-transform-immutable
redux-persist-transform-immutable –对redux-persist github.com的不可变支持
否则，“ redux-persist”将不起作用。
苹果评论修复
我们进行了4次通过Apple审查的尝试。 对我们来说幸运的是，苹果评论小组的每条评论大约花了两天时间（如果在美国的公共假期不是很长的话）。 我们所有的问题都与我们的可续订订阅有关。 为了避免这种情况，您只需要遵循准则即可，但这是我的第一个应用程序，对此我一无所知。 我想显示我们的最终购买屏幕，其中包括所有必要的修复程序：
重要事项清单：
- 明确显示这是自动续订的订阅，并显示一个订阅期的价格。
- 添加“使用条款”和“隐私政策”按钮
- 添加“还原购买”，不要在没有用户操作的情况下还原购买，Apple不喜欢它。
- 在我的购买屏幕底部添加此长文本，只需将其复制到某处，这是强制性的
苹果公司拥有非常优秀和友好的审阅团队，因此不要害羞地询问审阅过程中发现的问题。 有时您甚至不需要解决某些问题，只需向审核团队解释您的职位，也许您就可以说服他们😉
还有一件事-我听到一些故事，苹果不喜欢App Store中的“反应本机”应用程序，但我无法证明这一点。 我们没有任何问题，因为“反应原生”
最重要的提示
通过审核后，请勿使用自动发布功能，也不要立即发布您的应用程序。 请耐心等待几天，因为您的应用内购买交易将单独审核。 我们在审核后立即发布了我们的应用，并且一天内没有inAppPurchas项目。 我对购买的产品版本不熟悉，因此那天在调试器中度过，以了解为什么我在应用程序的调试版本中而不是生产版本中拥有它。
结论
如果您做了这么长时间，那么您对使用javascript进行移动开发的兴趣与我一样。 我对本机响应的经验只是积极的，我可以推荐它。 但是，要让自己感觉更舒适，最好了解本机应用程序的工作原理，并可能使用真正的本机技术为iOS和（或）Android创建一些“ TODO LIST”应用程序。
一个更有用的链接。 这是Github仓库，包含用于响应本机开发的文章，组件和其他有用的东西的集合：
琼多特/真棒反应本机
awesome-react-native-很棒的React Native组件，新闻，工具和学习资料！ github.com
如果您想仔细看一下该应用程序：
- BurgeramtApp网站
Bürgeramt应用程序–柏林Buergeramt的非官方（私人）应用程序
Bürgeramttermin，einwohnermeldeamt，bürgeramtanmeldung，bürgeramt柏林ohne termin，termin vereinbaren… burgeramtapp.com
- BurgeramtApp iOS
Burgeramt App：在App Store上的内容
阅读评论，比较客户评分，查看屏幕截图，并进一步了解Burgeramt App。 下载Burgeramt应用程序并… itunes.apple.com