元?dú)忾喿x無付費(fèi)版4.0.3安卓版

編輯點(diǎn)評(píng)：

元?dú)忾喿xapp是閱文旗下二次元原創(chuàng)作品官方平臺(tái)，在這里你可以免費(fèi)閱讀各類二次元小說，還能在線發(fā)帖、回帖、跟帖，了解更多二次元相關(guān)資訊信息和活動(dòng)，輕松玩轉(zhuǎn)二次元。

元?dú)忾喿x主要內(nèi)容介紹

1、我們致力給二次元用戶提供充滿腦洞、有趣的二次元小說 

2、我們擁有：遠(yuǎn)瞳、國王陛下、三天兩覺、憤怒的松鼠、醉臥笑伊人、二目、蝴蝶藍(lán)、圣騎士的傳說、會(huì)說話的肘子、姐姐的新娘、明月地上霜、枯玄、如傾如訴、那一只蚊子、皆破、狐不悲 、李四羊 、追夢(mèng)人Love平、青棘、爛衣奸少 等二次元大神作家

 3、我們擁有：愛神巧克力進(jìn)行時(shí)、時(shí)空使徒、一人之下、斗羅大陸、戒魔人、今天開始做女神、我是廢柴、仙逆、斗破蒼穹、狐妖小紅娘、偷星九月天、我為蒼生、龍隱者、人體培植、絕品透視、美食的俘虜、斗戰(zhàn)狂潮、分裂女神、龍族4、皇帝的獨(dú)生女、百花繚亂、時(shí)空幸存者、據(jù)說我是王的女兒？等漫畫作品

 4、我們作為全職、斗破和女巫等IP的官方渠道，在這里能挖到一手資訊，我們有修真聊天群、我修的可能是假仙、大盜賊、顧道長生、女帝的大內(nèi)總管、仙王的日常生活、大王饒命、落地一把98K等作品

 我們立志營造一個(gè)讓二次元書友看書、玩樂的全體驗(yàn)基地

軟件功能

【酣暢體驗(yàn)】300多名編輯用工匠精神打造每本書，圖文并茂，業(yè)界公認(rèn)，給你最精品的閱讀體驗(yàn)。

【酷炫功能】元?dú)忾喿x支持TXT、PDF閱讀，導(dǎo)入閱讀更方便；朗讀、分頁、筆記、書摘、注釋、字典……只有你想不到的超強(qiáng)功能。

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

【超全書庫】正版精品圖書、海量網(wǎng)文神作，你想看的全都有。

軟件特色

1.元?dú)饽锍醮瘟料�，帶來一個(gè)全新的閱讀產(chǎn)品，并提供海量的二次元原創(chuàng)作品

2.元?dú)饽飵�你社�?huì)，給喜歡的作品角色打call送禮物

3.元?dú)饽镩_設(shè)小課堂，教大家如何玩轉(zhuǎn)元?dú)馊?/p>

4.元?dú)饽锝棠隳Хǎ瑤�你成為舉世無雙魔法師。

資訊推薦

React Native 在「元?dú)忾喿x」的實(shí)踐

經(jīng)歷了三個(gè)多月的集中開發(fā)，閱文集團(tuán)旗下二次元產(chǎn)品「元?dú)忾喿x」APP 終于在各大應(yīng)用商店上架了�！冈�?dú)忾喿x」APP 大部分的功能模塊基于 React Native 開發(fā)，整個(gè)開發(fā)過程前端團(tuán)隊(duì)趟了不少 React Native 的坑，同時(shí)也積累了不少實(shí)踐心得，與大家一起分享。

一、業(yè)務(wù)背景與技術(shù)選型

在使用 React Native （以下簡稱RN）之前，和業(yè)界大部分團(tuán)隊(duì)一樣， 我們 APP 的開發(fā)模式采用的是客戶端（iOS/Android）內(nèi)嵌 H5 的 Hybrid 開發(fā)模式。一開始，我們除了采用比較成熟的離線包方案管理靜態(tài)資源，在首屏加載體驗(yàn)上我們也做了不少優(yōu)化工作，但發(fā)現(xiàn) H5 線上的體驗(yàn)和性能數(shù)據(jù)與原生還是有不少差距，所以我們決定引入新方案。

RN 和 Weex 已經(jīng)是業(yè)界兩個(gè)相對(duì)成熟的 Hybrid 解決方案，基本能滿足我們的需求：

用戶體驗(yàn)：相比于 H5 頁面，RN 和 Weex 在用戶體驗(yàn)上有了很大的提升，體驗(yàn)幾乎接近原生

人力成本：相比于客戶端，RN 和 Weex 的一套代碼可以跑在 iOS、Android 兩端，且代碼重用率也較高

靈活發(fā)布：RN 和 Weex 都擁有熱更新能力

最終我們選擇了 RN 作為解決方案，主要是考慮了幾個(gè)因素：

社區(qū)現(xiàn)狀：相對(duì) Weex，RN 的社區(qū)活躍度和 Facebook React 周邊生態(tài)更好

大廠背書：騰訊、京東、百度和攜程都有大型產(chǎn)品在線上跑

團(tuán)隊(duì)現(xiàn)狀：早在 17 年上半年，閱文前端團(tuán)隊(duì)已經(jīng)選型 React 作為我們前臺(tái)產(chǎn)品線的主要研發(fā)技術(shù)棧，且大部分成員都能駕馭 React

二、應(yīng)用場景

在「元?dú)忾喿x」APP 中，使用 RN 開發(fā)的應(yīng)用場景達(dá)到了 70% 左右。用戶能看到的頁面中，除了書架、注冊(cè)登錄和閱讀引擎，其它模塊幾乎都是使用 RN 完成開發(fā)，「元?dú)忾喿x」APP 已經(jīng)屬于國內(nèi)大型產(chǎn)品中，超大規(guī)模的 RN 應(yīng)用了。歡迎大家在各應(yīng)用商店（iOS、Android）搜索「元?dú)忾喿x」下載體驗(yàn)。

▲小說書城

▲漫畫書城

▲元?dú)馊?/p>

▲漫畫詳情

▲排行榜

▲分類

三、導(dǎo)航管理

對(duì)于 RN 的開發(fā)，導(dǎo)航的前期規(guī)劃十分重要，通常在搭建項(xiàng)目時(shí)就需要提前考慮。關(guān)于導(dǎo)航組件的選擇，react-navigation 是個(gè)不錯(cuò)的選擇，我們希望 react-navigation 能在業(yè)務(wù)場景更加通用。

1、統(tǒng)一跳轉(zhuǎn)規(guī)則

Native 與 RN 互跳是最常見的需求。有了統(tǒng)一的 URL，只需維護(hù)一份 sitemap 和實(shí)現(xiàn)一個(gè) open 接口，就可以很容易的在 Native 與 RN 中互相跳轉(zhuǎn)。

react-navigation 是使用 routeName + params 的形式跳轉(zhuǎn)的，所以需要在調(diào)用 router.getStateForAction 之前做一點(diǎn)調(diào)整：

// 修正 action: 允許 navigate/push/reset 動(dòng)作傳 url

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

  if (isRouteUrl(action.routeName)) {

    // 使用 path-to-regexp 庫來判斷 url 對(duì)應(yīng)的 routeName + params

    const route = parseRouteByUrl(action.routeName) 

    if (route) {

      action.routeName = route.name

      action.params = route.params

    }

  }

}

2、實(shí)現(xiàn) 404 跳轉(zhuǎn)

在 Web 開發(fā)中，404 頁面是一個(gè)很常見的邏輯，參照上面的方式， RN 可以這樣實(shí)現(xiàn)：

// 修正 action: 當(dāng) navigate/push/replace 跳轉(zhuǎn)到未知 routeName 時(shí)，調(diào)整為定義的 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、控制頁面生命周期

在項(xiàng)目開發(fā)過程中，經(jīng)常碰到這樣的需求，回到原來頁面之后要刷新原頁面的數(shù)據(jù)，比如登錄之后、進(jìn)入詳情頁完成某操作之后回到列表頁等。

「元?dú)忾喿x」項(xiàng)目剛啟動(dòng)時(shí) react-navigation 還是 0.x 版本，只能用 onNavigationStateChange + context 才能讓頁面感知 focus/blur 。1.x 版本之后，我們可以通過自帶的 addListener 方法來監(jiān)聽 didFocus 或 didBlur 事件。