编辑点评：

元气阅读app是阅文旗下二次元原创作品官方平台，在这里你可以免费阅读各类二次元小说，还能在线发帖、回帖、跟帖，了解更多二次元相关资讯信息和活动，轻松玩转二次元。

元气阅读主要内容介绍

1、我们致力给二次元用户提供充满脑洞、有趣的二次元小说 

2、我们拥有：远瞳、国王陛下、三天两觉、愤怒的松鼠、醉卧笑伊人、二目、蝴蝶蓝、圣骑士的传说、会说话的肘子、姐姐的新娘、明月地上霜、枯玄、如倾如诉、那一只蚊子、皆破、狐不悲 、李四羊 、追梦人Love平、青棘、烂衣奸少 等二次元大神作家

 3、我们拥有：爱神巧克力进行时、时空使徒、一人之下、斗罗大陆、戒魔人、今天开始做女神、我是废柴、仙逆、斗破苍穹、狐妖小红娘、偷星九月天、我为苍生、龙隐者、人体培植、绝品透视、美食的俘虏、斗战狂潮、分裂女神、龙族4、皇帝的独生女、百花缭乱、时空幸存者、据说我是王的女儿？等漫画作品

 4、我们作为全职、斗破和女巫等IP的官方渠道，在这里能挖到一手资讯，我们有修真聊天群、我修的可能是假仙、大盗贼、顾道长生、女帝的大内总管、仙王的日常生活、大王饶命、落地一把98K等作品

 我们立志营造一个让二次元书友看书、玩乐的全体验基地

软件功能

【酣畅体验】300多名编辑用工匠精神打造每本书，图文并茂，业界公认，给你最精品的阅读体验。

【酷炫功能】元气阅读支持TXT、PDF阅读，导入阅读更方便；朗读、分页、笔记、书摘、注释、字典……只有你想不到的超强功能。

【更新神速】每日上新、连载秒更；天天不同，月月翻新。

【超全书库】正版精品图书、海量网文神作，你想看的全都有。

软件特色

1.元气娘初次亮相，带来一个全新的阅读产品，并提供海量的二次元原创作品

2.元气娘带你社会，给喜欢的作品角色打call送礼物

3.元气娘开设小课堂，教大家如何玩转元气圈

4.元气娘教你魔法，带你成为举世无双魔法师。

资讯推荐

React Native 在「元气阅读」的实践

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

一、业务背景与技术选型

在使用 React Native （以下简称RN）之前，和业界大部分团队一样， 我们 APP 的开发模式采用的是客户端（iOS/Android）内嵌 H5 的 Hybrid 开发模式。一开始，我们除了采用比较成熟的离线包方案管理静态资源，在首屏加载体验上我们也做了不少优化工作，但发现 H5 线上的体验和性能数据与原生还是有不少差距，所以我们决定引入新方案。

RN 和 Weex 已经是业界两个相对成熟的 Hybrid 解决方案，基本能满足我们的需求：

用户体验：相比于 H5 页面，RN 和 Weex 在用户体验上有了很大的提升，体验几乎接近原生

人力成本：相比于客户端，RN 和 Weex 的一套代码可以跑在 iOS、Android 两端，且代码重用率也较高

灵活发布：RN 和 Weex 都拥有热更新能力

最终我们选择了 RN 作为解决方案，主要是考虑了几个因素：

社区现状：相对 Weex，RN 的社区活跃度和 Facebook React 周边生态更好

大厂背书：腾讯、京东、百度和携程都有大型产品在线上跑

团队现状：早在 17 年上半年，阅文前端团队已经选型 React 作为我们前台产品线的主要研发技术栈，且大部分成员都能驾驭 React

二、应用场景

在「元气阅读」APP 中，使用 RN 开发的应用场景达到了 70% 左右。用户能看到的页面中，除了书架、注册登录和阅读引擎，其它模块几乎都是使用 RN 完成开发，「元气阅读」APP 已经属于国内大型产品中，超大规模的 RN 应用了。欢迎大家在各应用商店（iOS、Android）搜索「元气阅读」下载体验。

▲小说书城

▲漫画书城

▲元气圈

▲漫画详情

▲排行榜

▲分类

三、导航管理

对于 RN 的开发，导航的前期规划十分重要，通常在搭建项目时就需要提前考虑。关于导航组件的选择，react-navigation 是个不错的选择，我们希望 react-navigation 能在业务场景更加通用。

1、统一跳转规则

Native 与 RN 互跳是最常见的需求。有了统一的 URL，只需维护一份 sitemap 和实现一个 open 接口，就可以很容易的在 Native 与 RN 中互相跳转。

react-navigation 是使用 routeName + params 的形式跳转的，所以需要在调用 router.getStateForAction 之前做一点调整：

// 修正 action: 允许 navigate/push/reset 动作传 url

if (isPushLikeAction(action) || isReplaceAction(action)) {

  if (isRouteUrl(action.routeName)) {

    // 使用 path-to-regexp 库来判断 url 对应的 routeName + params

    const route = parseRouteByUrl(action.routeName) 

    if (route) {

      action.routeName = route.name

      action.params = route.params

    }

  }

}

2、实现 404 跳转

在 Web 开发中，404 页面是一个很常见的逻辑，参照上面的方式， RN 可以这样实现：

// 修正 action: 当 navigate/push/replace 跳转到未知 routeName 时，调整为定义的 notFoundRouteName

if (isPushLikeAction(action) || isReplaceAction(action)) {

  // 修正 action: 提供 404 能力

  if (allRouteNames.indexOf(action.routeName) === -1) {

    const oldAction = { ...action }

    action.routeName = notFoundRouteName

    action.params = { action: oldAction }

  }

}

3、控制页面生命周期

在项目开发过程中，经常碰到这样的需求，回到原来页面之后要刷新原页面的数据，比如登录之后、进入详情页完成某操作之后回到列表页等。

「元气阅读」项目刚启动时 react-navigation 还是 0.x 版本，只能用 onNavigationStateChange + context 才能让页面感知 focus/blur 。1.x 版本之后，我们可以通过自带的 addListener 方法来监听 didFocus 或 didBlur 事件。