React Native 在元气阅读的实践及踩过的坑

经历了三个多月的集中开发，阅文集团旗下二次元产品「元气阅读」APP 终于在各大应用商店上架了。「元气阅读」APP的大部分功能模块基于 React Native 开发，整个开发过程前端团队趟了不少 React Native 的坑，同时也积累了不少实践心得，与大家一起分享。

在使用React Native进行开发之前，前端团队对React Native的认知还停留在2017年，以为React Native只是Facebook为了开发自己的移动APP而开发的一个玩具，社区不够成熟，相关的学习资料也不够丰富。

然而，在2019年，前端团队发现React Native已经成为一个比较成熟的跨平台开发框架了，社区非常活跃，相关的学习资料也非常丰富。于是，前端团队决定使用React Native来开发「元气阅读」APP。

在开发「元气阅读」APP的过程中，前端团队遇到了不少坑，也总结了一些实践心得。

坑1：兼容性问题

React Native最大的坑就是兼容性问题。由于iOS和Android两个平台的差异，React Native在两个平台上会出现不同的表现。比如，在iOS上可以正常显示的控件，在Android上就可能无法正常显示。

为了解决这个问题，前端团队需要对代码进行大量的兼容性处理。比如，需要使用不同的代码来实现相同的UI效果，或者需要使用不同的库来解决相同的问题。

坑2：性能问题

React Native的另一个坑就是性能问题。由于React Native是跨平台开发框架，因此它的性能不如原生开发框架。

为了解决这个问题，前端团队需要对代码进行大量的性能优化。比如，需要使用一些性能优化库，或者需要对代码进行重构。

坑3：开发效率问题

React Native的开发效率也不如原生开发框架。这是因为React Native需要在JavaScript和原生代码之间进行通信，而这种通信会带来一些性能损耗。

为了解决这个问题，前端团队需要使用一些提高开发效率的工具。比如，可以使用一些代码编辑器插件，或者可以使用一些自动化构建工具。

实践心得1：使用Typescript

Typescript是JavaScript的超集，它可以帮助前端团队编写出更加健壮的代码。

在开发「元气阅读」APP的过程中，前端团队使用了Typescript来编写代码。Typescript不仅可以帮助前端团队发现代码中的错误，还可以帮助前端团队提高代码的可读性。

实践心得2：使用Redux

Redux是一个状态管理框架，它可以帮助前端团队管理应用程序的状态。

在开发「元气阅读」APP的过程中，前端团队使用了Redux来管理应用程序的状态。Redux不仅可以帮助前端团队实现数据共享，还可以帮助前端团队实现数据的持久化。

实践心得3：使用Mobx

Mobx是一个状态管理框架，它可以帮助前端团队管理应用程序的状态。

在开发「元气阅读」APP的过程中，前端团队使用了Mobx来管理应用程序的状态。Mobx不仅可以帮助前端团队实现数据共享，还可以帮助前端团队实现数据的持久化。

实践心得4：使用Enzyme

Enzyme是一个测试框架，它可以帮助前端团队测试应用程序的组件。

在开发「元气阅读」APP的过程中，前端团队使用了Enzyme来测试应用程序的组件。Enzyme不仅可以帮助前端团队发现组件中的错误，还可以帮助前端团队提高组件的可读性。

实践心得5：使用Jest

Jest是一个测试框架，它可以帮助前端团队测试应用程序的代码。

在开发「元气阅读」APP的过程中，前端团队使用了Jest来测试应用程序的代码。Jest不仅可以帮助前端团队发现代码中的错误，还可以帮助前端团队提高代码的可读性。

总结

React Native是一个比较成熟的跨平台开发框架，社区非常活跃，相关的学习资料也非常丰富。使用React Native可以提高开发效率，降低开发成本。

然而，React Native也有一些坑，比如兼容性问题、性能问题和开发效率问题。前端团队需要对这些坑有所了解，并采取相应的措施来解决这些坑。

如果前端团队能够解决这些坑，那么React Native将是一个非常好的跨平台开发框架。