編輯點評:
元氣閱讀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 事件。
熱門評論
最新評論