摘要:鑒于我平常使用的是系統,就決定我只開發安卓客戶端,客戶端我們又招了一個小伙伴。一般來講,安卓系統是這一兩年市面上常用機型配置的系統。
從去年的10月份開始,我的大部分工作重心從傳統的前端開發轉向了使用ReactNative開發APP,在這個過程當中,走過了不少彎路,也遇到了一些技術相關的問題,但總算沒有辜負那些對我信任的人。經歷過痛苦和無助,終于堅持了下來,一個月的時間把產品成功部署上線了。想想這些日子其中不乏有一些經驗,先愿意拿出來和大家交流交流,其中難免有一些不是最優的方法和方案,還望大家多提意見。
背景一開始為了快速的開展業務,我們決定把產品先通過H5的形式進行線上運行,終于在兩周的高效率工作情況下,我們產品上線了,但相比較APP,使用H5開發,不能滿足我們的產品需要,隨后就決定開發APP,但公司這個時候沒有APP開發的相關人員,我只好硬著頭皮上了,通過學習ReactNative相關的基本知識,然后不斷的向身邊一些做過RN開發的朋友取經,使用RN開發APP的工作,才慢慢的走上正軌,起初,我打算IOS和安卓都用RN開發,但考慮到工作量和日常的一些事情,我一個人難免會耽誤大家的進度。鑒于我平常使用的是window系統,就決定我只開發安卓客戶端,IOS客戶端我們又招了一個小伙伴。這樣我的工作就有APP開發,H5開發,管理后臺相關的支持等事情需要做。
基礎工作開發APP的基礎框架包,一開始使用create-react-app,再后來使用react-native-dva-starter作為基礎的框架包。相比較create-react-app這個基礎的框架,后者增加了dva和react-navigation模塊,其中dva是一個基于redux和redux-saga的數據流方案,主要是為了管理我們項目當中的數據的,其中包括,數據請求,數據模型,數據存儲,react-navigation是一套路由系統,可以幫助我們實現頁面跳轉,并管理歷史跳轉數據。數據的請求我們可以使用HTML5提供的fetch,也可以像通常開發H5頁面那樣使用Axios,畢竟請求數據這件事情,只不過是為了發起一個ajax請求,然后把數據拿回來就好,使用什么不太緊要,我在項目當中實際使用Axios來完成這部分的事情。準備好了上面相關的內容之后,我們最最基礎的代碼內容算是弄好了,后面就可以通過一些第三方的npm包,為你的項目加磚添瓦了;以下是我的項目當中用到的第三方包列表:
react-native-splash-screen 開屏廣告
react-native-swiper 圖片輪播
react-native-pdf 支持顯示PDF文件
react-native-picker 列表選擇
react-native-root-tips toast提示框
react-native-dialog dialog模態框
react-native-checkbox-component checkbox組件
react-native-linear-gradient 實現漸變
react-native-version-number APP版本號管理
react-native-device-info 獲取設備信息
react-native-contacts-wrapper-pro 獲取用戶聯系人
react-native-code-push APP熱更新
react-native-image-picker 通過圖片列表和拍照選擇圖片
以上不是全部,有些可能沒有列出來,一個包的需不需要,往往是根據我們的需求來的,如果可以,你可以添加其他的包進來。
代碼結構以上是不完全的目錄結構,具體的內容,各位看官可以去我的代碼倉庫中去下載,查看詳細的內容。我會在文章的底部附上代碼相關的地址。
預備知識和環境工欲善其事必先利其器,以上我忽略了一個重要的部分,就是環境搭建的過程。這部分工作說起來不容小覷,沒有這一步的勝利,后面所有的事情,都是白搭。關于環境,我們需要一個安卓的模擬器和打包和運營的JAVA環境,以及開發安卓APP相關版本的SDK包。具體環境的搭建詳情,大家可以去
這里看,然后大家需要有react,webpack,redux的基礎知識,以及對MVVM設計思想的初步了解,這樣后續的事情,開展起來會順利一些,不然就會一步三坑,看的一臉懵逼。
對了,開發安卓APP,大家一定要了解安卓各個版本在現在的安卓手機中使用的情況,比如說,3年前我們安卓的客戶端,最低只支持安卓4.0的系統,然后向上兼容,如果你現在用的是安卓手機,你可以查看下你自己的機器系統版本是多少。一般來講,安卓8.0系統是這一兩年市面上常用機型配置的系統。我的項目當中,是基于安卓8.0系統進行開發的,所以說說,創建安卓虛擬機的時候,我會下載相關版本的SDK,明白了這些,你在開發時候下載SDK的時候,就可以有選擇了,不用一股腦的把所有版本的SDK下載到本地,毫不夸張的說,所有安卓版本的SDK資源的大小應該不會小于50G,而且這些資源是從國外那邊下載的,如果你真的不小心下載了所有的SDK包,我相信,你會哭的。
我配置的安卓模擬器是使用Android Studio中帶的,下面是我配置的安卓模擬器的一些信息:
開發的過程當中,難免會遇到一些問題,建議大家多看看API文檔,如果是第三方包,多看看他們的案例代碼信息,如果實在解決不了,您也可以私聊我,我們一起探討下。以下是APP產品的一些截圖
代碼地址:https://github.com/mmcai/reac...
dva.js地址:https://dvajs.com/
React-Native中文文檔地址:https://reactnative.cn/
react-navigation地址:https://reactnavigation.org/d...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109528.html
摘要:前端每周清單半年盤點之與篇前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日,宣布將的構建工具由遷移到,引發了很多開發者的討論。 前端每周清單半年盤點之 React 與 ReactNative 篇 前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點;分為...
摘要:,已過期,請使用代替。解決方案安卓增加屬性并設置為官方解釋當圖片實際尺寸和容器樣式尺寸不一致時,決定以怎樣的策略來調整圖片的尺寸。 本文均為RN開發過程中遇到的問題、坑點的分析及解決方案,各問題點之間無關聯,希望能幫助讀者少走彎路,持續更新中... (2019年3月29日更新) 原文鏈接:http://www.kovli.com/2018/06/... 作者:Kovli - 如何在原生...
閱讀 2026·2021-11-19 11:37
閱讀 714·2021-11-11 16:54
閱讀 1161·2021-11-02 14:44
閱讀 3048·2021-09-02 15:40
閱讀 2368·2019-08-30 15:44
閱讀 951·2019-08-29 11:17
閱讀 1058·2019-08-26 14:06
閱讀 1552·2019-08-26 13:47