摘要：鑒于我平常使用的是系統(tǒng)，就決定我只開(kāi)發(fā)安卓客戶端，客戶端我們又招了一個(gè)小伙伴。一般來(lái)講，安卓系統(tǒng)是這一兩年市面上常用機(jī)型配置的系統(tǒng)。

從去年的10月份開(kāi)始，我的大部分工作重心從傳統(tǒng)的前端開(kāi)發(fā)轉(zhuǎn)向了使用ReactNative開(kāi)發(fā)APP，在這個(gè)過(guò)程當(dāng)中，走過(guò)了不少?gòu)澛?，也遇到了一些技術(shù)相關(guān)的問(wèn)題，但總算沒(méi)有辜負(fù)那些對(duì)我信任的人。經(jīng)歷過(guò)痛苦和無(wú)助，終于堅(jiān)持了下來(lái)，一個(gè)月的時(shí)間把產(chǎn)品成功部署上線了。想想這些日子其中不乏有一些經(jīng)驗(yàn)，先愿意拿出來(lái)和大家交流交流，其中難免有一些不是最優(yōu)的方法和方案，還望大家多提意見(jiàn)。

一開(kāi)始為了快速的開(kāi)展業(yè)務(wù)，我們決定把產(chǎn)品先通過(guò)H5的形式進(jìn)行線上運(yùn)行，終于在兩周的高效率工作情況下，我們產(chǎn)品上線了，但相比較APP，使用H5開(kāi)發(fā)，不能滿足我們的產(chǎn)品需要，隨后就決定開(kāi)發(fā)APP，但公司這個(gè)時(shí)候沒(méi)有APP開(kāi)發(fā)的相關(guān)人員，我只好硬著頭皮上了，通過(guò)學(xué)習(xí)ReactNative相關(guān)的基本知識(shí)，然后不斷的向身邊一些做過(guò)RN開(kāi)發(fā)的朋友取經(jīng)，使用RN開(kāi)發(fā)APP的工作，才慢慢的走上正軌，起初，我打算IOS和安卓都用RN開(kāi)發(fā)，但考慮到工作量和日常的一些事情，我一個(gè)人難免會(huì)耽誤大家的進(jìn)度。鑒于我平常使用的是window系統(tǒng)，就決定我只開(kāi)發(fā)安卓客戶端，IOS客戶端我們又招了一個(gè)小伙伴。這樣我的工作就有APP開(kāi)發(fā)，H5開(kāi)發(fā)，管理后臺(tái)相關(guān)的支持等事情需要做。

開(kāi)發(fā)APP的基礎(chǔ)框架包，一開(kāi)始使用create-react-app，再后來(lái)使用react-native-dva-starter作為基礎(chǔ)的框架包。相比較create-react-app這個(gè)基礎(chǔ)的框架，后者增加了dva和react-navigation模塊，其中dva是一個(gè)基于redux和redux-saga的數(shù)據(jù)流方案，主要是為了管理我們項(xiàng)目當(dāng)中的數(shù)據(jù)的，其中包括，數(shù)據(jù)請(qǐng)求，數(shù)據(jù)模型，數(shù)據(jù)存儲(chǔ)，react-navigation是一套路由系統(tǒng)，可以幫助我們實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)，并管理歷史跳轉(zhuǎn)數(shù)據(jù)。數(shù)據(jù)的請(qǐng)求我們可以使用HTML5提供的fetch，也可以像通常開(kāi)發(fā)H5頁(yè)面那樣使用Axios，畢竟請(qǐng)求數(shù)據(jù)這件事情，只不過(guò)是為了發(fā)起一個(gè)ajax請(qǐng)求，然后把數(shù)據(jù)拿回來(lái)就好，使用什么不太緊要，我在項(xiàng)目當(dāng)中實(shí)際使用Axios來(lái)完成這部分的事情。準(zhǔn)備好了上面相關(guān)的內(nèi)容之后，我們最最基礎(chǔ)的代碼內(nèi)容算是弄好了，后面就可以通過(guò)一些第三方的npm包，為你的項(xiàng)目加磚添瓦了；以下是我的項(xiàng)目當(dāng)中用到的第三方包列表：

react-native-splash-screen 開(kāi)屏廣告

react-native-swiper 圖片輪播

react-native-pdf 支持顯示PDF文件

react-native-picker 列表選擇

react-native-root-tips toast提示框

react-native-dialog dialog模態(tài)框

react-native-checkbox-component checkbox組件

react-native-linear-gradient 實(shí)現(xiàn)漸變

react-native-version-number APP版本號(hào)管理

react-native-device-info 獲取設(shè)備信息

react-native-contacts-wrapper-pro 獲取用戶聯(lián)系人

react-native-code-push APP熱更新

react-native-image-picker 通過(guò)圖片列表和拍照選擇圖片

以上不是全部，有些可能沒(méi)有列出來(lái)，一個(gè)包的需不需要，往往是根據(jù)我們的需求來(lái)的，如果可以，你可以添加其他的包進(jìn)來(lái)。

以上是不完全的目錄結(jié)構(gòu)，具體的內(nèi)容，各位看官可以去我的代碼倉(cāng)庫(kù)中去下載，查看詳細(xì)的內(nèi)容。我會(huì)在文章的底部附上代碼相關(guān)的地址。

工欲善其事必先利其器，以上我忽略了一個(gè)重要的部分，就是環(huán)境搭建的過(guò)程。這部分工作說(shuō)起來(lái)不容小覷，沒(méi)有這一步的勝利，后面所有的事情，都是白搭。關(guān)于環(huán)境，我們需要一個(gè)安卓的模擬器和打包和運(yùn)營(yíng)的JAVA環(huán)境，以及開(kāi)發(fā)安卓APP相關(guān)版本的SDK包。具體環(huán)境的搭建詳情，大家可以去
這里看，然后大家需要有react，webpack，redux的基礎(chǔ)知識(shí)，以及對(duì)MVVM設(shè)計(jì)思想的初步了解，這樣后續(xù)的事情，開(kāi)展起來(lái)會(huì)順利一些，不然就會(huì)一步三坑，看的一臉懵逼。
對(duì)了，開(kāi)發(fā)安卓APP，大家一定要了解安卓各個(gè)版本在現(xiàn)在的安卓手機(jī)中使用的情況，比如說(shuō)，3年前我們安卓的客戶端，最低只支持安卓4.0的系統(tǒng)，然后向上兼容，如果你現(xiàn)在用的是安卓手機(jī)，你可以查看下你自己的機(jī)器系統(tǒng)版本是多少。一般來(lái)講，安卓8.0系統(tǒng)是這一兩年市面上常用機(jī)型配置的系統(tǒng)。我的項(xiàng)目當(dāng)中，是基于安卓8.0系統(tǒng)進(jìn)行開(kāi)發(fā)的，所以說(shuō)說(shuō)，創(chuàng)建安卓虛擬機(jī)的時(shí)候，我會(huì)下載相關(guān)版本的SDK，明白了這些，你在開(kāi)發(fā)時(shí)候下載SDK的時(shí)候，就可以有選擇了，不用一股腦的把所有版本的SDK下載到本地，毫不夸張的說(shuō)，所有安卓版本的SDK資源的大小應(yīng)該不會(huì)小于50G，而且這些資源是從國(guó)外那邊下載的，如果你真的不小心下載了所有的SDK包，我相信，你會(huì)哭的。
我配置的安卓模擬器是使用Android Studio中帶的，下面是我配置的安卓模擬器的一些信息：

開(kāi)發(fā)的過(guò)程當(dāng)中，難免會(huì)遇到一些問(wèn)題，建議大家多看看API文檔，如果是第三方包，多看看他們的案例代碼信息，如果實(shí)在解決不了，您也可以私聊我，我們一起探討下。以下是APP產(chǎn)品的一些截圖

代碼地址：https://github.com/mmcai/reac...
dva.js地址：https://dvajs.com/
React-Native中文文檔地址：https://reactnative.cn/
react-navigation地址：https://reactnavigation.org/d...