如何使用ReactNative快速開發一個APP

從去年的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...