驯服野兽。 在React Native上开发个人日记应用程序时我们面临的挑战

在上一篇文章中，我详细介绍了我们在创建用于维护个人日记的Web服务/移动应用程序方面的经验。 该应用程序的当前版本（最低可用版本已在Google Play上提供）正在React Native上开发，今天我们将在这里详细介绍。

我们将讨论我们在框架方面的经验，扩展功能的方式，“陷阱”（没有它们，您在哪里！）以及如何解决它们。

关于整个框架

关于这个场合的英雄-React Native 。 他还不错！

对于那些了解JavaScript尤其是NodeJS的人来说，它非常好。 如果您有过React的经验，或者至少了解它的思想，机制-它简直就是宏伟！

最主要的是输出是真正的本机应用程序。 扩展和插件涵盖了几乎99％的典型任务。 可以在本机语言（java，object-c）中添加紧急情况下剩余的百分比，并将其连接到React Native应用程序。

但是对于职业选手来说足够了，尽管他们的名单会给人留下深刻的印象，但对他们毫无用处。 如果应用程序无法启动，那么所有的好东西和好东西都是没有意义的，这是我们使用React Native“取悦”的第一件事。

起初，他不喜欢NodeJS的版本。 然后是npm版本。 然后是Android SDK的版本，然后是Android工具的版本，... ...解决所有问题的方法没有任何意义，因为从那时起，上述所有软件都已更新其版本，并且说明将无关紧要。

请注意：React Native瓶颈是构建环境。 为Google学习，阅读论坛和Stackoverflow做好准备。 结果，我们花了很多时间进行部署：Ubuntu-3天，Win10-2天。 看起来很奇怪，事实证明，在Windows上，一切都变得更简单了，或者，甚至在ubuntu上，它们摆脱了困境，已经了解了在什么地方放手。

请注意，突然有人派上了用场：下面介绍的代码在编译项目时解决了与sdk版本的加载项兼容的所有问题。

subprojects { afterEvaluate {project -> if (project.hasProperty("android")) { android { compileSdkVersion 26 buildToolsVersion '26.0.3' } } } } 

它最终写在文件/android/build.gradle中。 显然，没有这个“指令”，每个插件/扩展都试图根据自己的Android SDK版本进行编译，这导致了该项目的组装，出现了各种各样的剧烈错误和令人讨厌的警告。 没有人知道该建议在将来的重要性。 但是今天，尤其是在Google强制禁止使用第26版以下的SDK进行编译之后，这很有帮助。

第二个瓶颈-支持有限，而痛苦不是React Native本身，而是整个Open Source整体。 存储库中有大量未解决的问题。 激烈的“智能”机器人会在没有活动的情况下关闭错误，有时甚至在7天后也会关闭。而且一切似乎都很好。 没有人欠任何人任何东西。 每个人都习惯了。



禁止在常规TextInput中输入文本时发现“小提示”，耐心就停止了。 只是一个文本框。 只需从屏幕键盘输入文字即可。 几分钟打印后，严重的滞后和制动开始。 我们急忙寻找问题-是的，有一个问题是从RN 5x.xx版本开始的。您解决了这个问题吗？ 不行 关于该主题的两个或三个问题仅已结束。 还有一些合并成一个大的 。

我必须深入研究，找到答案，尝试各种选择，更改RN的版本，希望那里没有门框。 结果，通过实验可以最大程度地减少性能差距-它们完全删除了所有格式并重写了输入处理程序。 但是不愉快的残留物仍然存在。 顺便说一下，到目前为止，框架开发人员的问题尚未解决，已经过去了六个月...

资料库

Realm是一个快速的数据库，具有令人印象深刻的功能，可以在Android，IOS，Windows上运行。

刚开始，他们有双重感觉，他们说，没有适合您的ORM，真的没有sql，记录仅在回调内部。 异常和奇怪，特别是对于最初来自PHP的Web开发人员来说，他们是在ActiveRecord和Doctrine上长大的。 但实际上，事实证明，为CRUD起草最少的功能集非常简单，快捷。 通过阅读简明，简明和易于理解的官方信息，解决了所有口味和习惯问题。

然后所有的礼物轮播开始了：

• 开箱即用的数据加密
• 延迟加载数据（仅从数据库中拉出当前所需的内容）
• 实体之间的真实关系（嗨mongo！
• 利用迁移功能对数据库结构进行版本控制-开箱即用
• 还有一堆小但不错的小东西。

看来数据库问题已完全解决。 我们正在工作！ 该案一直在辩论，直到他们到达搜索。 而是全文搜索。 更准确地说，是对俄语进行全文搜索，而不区分大小写。 他没有工作。 绝对是 用英语-工作。 区分大小写也起作用。 但没有登记，但俄语-甚至哭了。 在浏览了帮助， Bugtracker和Internet之后，结果发现由于某些技术原因，开发人员“想”支持多字节编码以及拉丁字母以外的所有内容非常不便。 好吧，他没有。 为什么不呢

无所事事，我不得不寻找解决方法。 由于短暂的攻击，我们做出了“强烈意愿”的决定-我们在“ fulltext_index”字段中进行了单独的设置。 在其中，我们以大写形式复制所有文本，同时“切出”不必要的标点符号，不必要的问题和各种垃圾。 此后，可以合理地假设我们使用强制大写字母进行搜索。

胜利了！ 现在，搜索甚至可以像俄语一样用英语显示时钟！

总计：尽管寄存器存在问题，但数据库的运行速度确实非常快，便利性是很高的，一堆现成的芯片都是现成的-通常，我建议这样做。

屏幕导航

wix / react-native-navigation是一种简单且稳定的导航器（就像Web程序员会说的那样是路由器）。

选择它的原因仅在于它通过了​​所有必要的内部测试（打开屏幕，调用堆栈，返回，边栏）。 通常，最低要求最低。


与广受欢迎的反应导航不同 ，wix具有100％的本地性。 就是这样-屏幕之间的所有转换都转换为Java应用程序代码，并在系统级别上实现。

在开发过程中，他们遇到了可怕的“白屏”错误，该错误仅在某些情况下以及在单个设备上才会出现。 碰巧，当您退出“睡眠”模式时，启动过程只会冻结。 调试器和调试是静默的。 在这个问题上的github上，只有奇怪的提示“ ...尝试播放”，以及加载屏幕和其他巫术宽限的顺序。 甚至还不清楚问题的级别是什么：Android的Java代码或JavaScript机器中已经存在的Java代码。 当我们用铃鼓跳舞后，错误开始出现的频率降低了，但并没有消失，一直悬而未决。 las

排除此“障碍”-一切或多或少都可以容忍和流畅。 而且，最重要的是本地人！

文件系统

在文件系统中，我们需要存储自定义照片，并需要处理与备份相关的几个文件。 由于从两个可能的选项中进行选择，因此选择落在react-native-fs上

“访问本机文件系统”-它写在存储库的入口处。 好吧，可能是这样，但是有一些修改和限制。

1.访问仅是异步的。 结果，有时您必须记住使用Promise / async / await。 尽管在React中您开始忘记它。

异步执行异步功能（等待），要求当前功能为异步（异步）。 为此，只需在函数名称前添加async即可。 是的，对于React.Component类方法，这也适用。 （在React帮助中，ReactNative对此保持沉默，尽管这本身就是隐含的）。

 export default class CloudIndex extends BasePage { async setupBackupFolders(init = false) { // some stuff there... await RunSomeAsyncFuncInSyncMode(foo, bar) RunFuncAfter(bar) } } 

重要的是要记住，此后函数也将变为异步！ 如果以前已经使用过，请仔细检查其调用。

2.完全的跨平台访问仅是文件系统的一部分。 本质上只有一个目录：DocumentDirectoryPath。 实际上，这就是应用程序所在的目录。 不用担心扫描根目录，在图库中搜索图片，音频等。这些都不可用。

但总的来说，它可以100％解决任务。 在储钱罐桅杆上。

云端存取

任务既简单又复杂。 很简单，因为每个人都有一个API-使用它并使用它。 很难-我不想深入研究，而且时间格式不允许我坐下来闲逛，“可能工作”。 我们决定找到一种100％有效的方法，并在React Native的现成扩展中实现。

正是其中之一：Google云端硬盘。 使用磁盘是可以理解的，并且受常规API请求的驱动。 但是让应用程序访问磁盘是完全不同的事情。
React-native-google-signin-谷歌授权管理系统


这就是我们“玩得开心”的地方。 他们希望它更简单，更可靠，但是他们得到了...

一切始于获得开发人员密钥。 以前，Google自己完成了所有这一切。 但是在接管FireBase之后，决定将此功能转移到其出色的控制台中。

因此，要获取密钥，您需要：

1. 在google开发人员控制台上注册应用程序，以便在那里“启用”访问云端硬盘服务。
2. 在Firebase控制台上注册应用程序。
3. 在Firebase控制台中创建文件google-services.json-在其中保护服务密钥。
4. 使用已安装的扩展名react-native-google-signin将此文件滑入项目。

然后，是的。 某些东西开始起作用。 而是，服务响应中的错误代码开始变得有意义。

特别重要的是要注意，应用程序在连接到服务时直接获得的API密钥根本不是永恒的。 有时每天更改一次，有时每分钟更改一次。 因此，在访问服务之前，总是最好先检查当前密钥是否过期。 如果它过期了-再次接收。

从Google获取API密钥的过程如下：

 await GoogleSignin.hasPlayServices() const userInfo = await GoogleSignin.signIn() this.setState({ userInfo: userInfo, }) settings.set('google.drive.key', userInfo.accessToken) trace('>> Key obtained:', userInfo.accessToken) this.apiKey = userInfo.accessToken 

因此，例如，在我们的应用程序中，当我们打开备份屏幕时，我们尝试从Google ID获取备份文件夹。 如果一切成功，我们将获得ID。

 backupRootID = await Storage.safeCreateFolder({ name: backupFolder, parents: ["root"], }).catch((e)=>{ if(e.status == 401) { trace(' >> Google signin unauthorized', e) signGoogle() return false } else { trace(' >> Google signin failed', e) } }) // Yeahh. The api key is valid, and rootID found on GoogleDrive! SomeStorage.setRootId(backupRootID) 

如果不是（出现错误401）-我们尝试获取新的API密钥，然后重复请求以再次获取备份文件夹的ID。

还有一些令人愉快的事情

处理日期和时间

荣誉与赞美moment.js
早在很久以前就开始认识这个奇迹了，它在React Native环境中也能很好地工作真是太好了。

一堆格式，魔术+-日/月/年。 支持多种语言和国家格式。 美女！

可以用番茄给我们淋浴，这表明所有这些都可以轻易地用普通的日期“统治”，但是在快速发展的情况下，不要以为这样的事情非常有用！

图形和图表

React-native-charts- wrapper-本机android MPAndroidCharts的JavaScript包装器。

我喜欢存在大量各种类型的图（尽管在此阶段，我们仅使用了其中两个-线性图和“饼图”）。

微不足道几乎缺少API参考的印象。 作者建议查看原始MPAndroidCharts的文档。 实际上，该建议难以实施，因为后者正在不断开发，并且在多个版本上都优于包装器的实施。 另外，MPAndroidCharts用Java编写。 Vrapper-在JavaScript中。 您很快必须考虑什么困难。

多种语言和翻译

React-native- i18n-像魅力一样工作，伙计们！

尽管此组件挂在标记为“已弃用”的github上，但它可以正常运行而不会出现故障和干扰。 所有翻译都整齐地分散在带有语言的文件中。

使用翻译器参数也可以解决：

 // en.js sync: { success: 'All items are up to date!', progress: 'Sync Notes %{idx} of %{total}' } //app.js import I18n from 'react-native-i18n' import en from './en.js' I18n.translations = { en } I18n.locale = "en" const _t = (msg, data) => { return I18n.t(msg, data) } console.log(_t('sync.progress', {idx: 3, total: 10})) 

在干渣中

React Native几乎满足了所有期望。 借助它的帮助，您可以相对快速地组装原型应用程序，确定结构和可用性。 所有用于“基础”的必要工具。

另一方面，当根本没有现成的解决方案时，总会有陷入“真空”的风险。 因此，例如，我们在将照片上传到应用程序时就得到了它-一个通常可以剪切和收缩图像的组件-仅一个。 它不是从我们当前的版本开始的。 如果需要非常“急”-您将不得不更新几乎一半的系统，这可能会导致再次寻找错误。

正如我们在市场上在React Native上组装的产品将展示出来的那样，我们将在未来几个月内找到答案。 但这是一个完全不同的故事。