React Native 音頻錄製例子來解惑入門

前言

本文基於開源Demo：https://github.com/zmxv/react-native-sound，通過這個例子學習怎麼開發React Native App.

這段時間都掉到React Native的坑，踩了不少坑，基本也是別人踩過的坑，既然是別人踩過的坑，那麼一般情況下都能找到解決方案，所以前期該踩的一些低級坑都踩了，不過這也讓筆者對RN有了新的認識，那就是RN有入門門檻，在新項目考慮用它的時候要慎重。

既然要快速掌握RN，那就先從實際需求出發了，我們要用它來做些什麼事情，筆者這裡有以下需求：

Android和iOS能夠用同一套模板頁面，不需要各自開發

能夠動態更新，類似熱更新的能力

能夠使用原生組件實現一些能力，比如音頻採集和播放

在這段時間實踐來看，RN是能夠滿足我的需求的，今天就通過一個例子來認識下RN是如何進行開發的。

React Native工程目錄結構

首先我們分析下RN的目錄結構是怎樣的，以我創建的工程為例，如下圖：

註：這個是Visual Studio Code，非常好用，用來開發RN也是蠻適合的，推薦一下。

目錄結構解析：

以上，沒有接觸過的同學可能比較蒙，具體如何搭建React Native開發環境參考：http://reactnative.cn/docs/0.46/getting-started.html#content

關於開發環境的搭建，筆者這裡不多說，這個是每個要入門RN的同學都要跨過的一道坎，沒有這一步後面的開發調試都是坑，你會發現非常得痛苦。

是Android的入口，我們看下它做了哪些動作：

稍微解析下，最前面有import的動作，跟java導包是類似，導入工程中需要用到的組件，比如，如果是導入自己開發的組件，也是通過import來到導入：

導入當前目錄下的js目錄下的AudioExample.js文件.

然後，我們需要將這個組件註冊到我們的App中，那麼就有了這一句：

說說怎麼用開源項目提供的組件

我們先看下集成後的效果圖：

這個開源組件實現了，錄製音頻，對音頻進行播放、停止、暫停等操作。

看下我的原生工程：

引入了兩個library，這兩個library都是通過npm install更新下來的，我們看下這個文件的配置：

可以看到在依賴裡面就引入了具體的組件，我們通過npm命令就能更新下來，具體在可以看到，down下來之後，我們需要引入到Android工程中：

配置

然後在app工程中的build.gradle進行依賴：

這樣就大功告成了？ no，還有一步：

需要我們在Application類中添加具體的package到list中：

這樣就完整的將開源組件引入到我們工程中了。

如何測試？

如果要在Android原生工程中去運行RN頁面，你需要打一個離線的js包

打包命令

具體路徑根據你的工程來配.

打包成功的效果如下：

如果你打包的時候就已經報錯，說明你的一些依賴環境或者js代碼沒弄好，需要仔細檢查下，打包是影響你最終運行程序的最後一步。

打包成功之後，運行，啟動開發伺服器（Packager）：

最後，直接在Android Studio像正常運行你的程序一樣執行run，最後就可以看到效果了。

總結

這段時間入門實踐React Natvie最大的感受就是坑多，這個需要比較多耐心去查資料和思考，筆者為了搞定這個都有點上火了，基本後面的障礙就不會是這些邊緣性問題，另外RN實時性調試還是蠻爽的，修改js重新載入就能夠實時看到效果，對後面調試有很大的幫助。前面說了，RN是有一定的學習門檻的，需要掌握js，一些css、html的基礎，在做技術選型的時候應該考慮下你的項目是否適合完全用RN來做，或者一部分用RN來做。大概就這麼多，感謝您的閱讀。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！