本發(fā)明涉及智能家居及物聯(lián)網(wǎng)技術(shù)領(lǐng)域，特別涉及一種基于react-native實(shí)現(xiàn)智能家居監(jiān)控系統(tǒng)。

背景技術(shù)：

智能家居系統(tǒng)是一個集硬件、軟件和通信等多種技術(shù)為一體的應(yīng)用系統(tǒng)，其中移動終端作為用戶操作行為的接口，擁有遠(yuǎn)程控制、監(jiān)測等多種功能。通常這類控制軟件都是基于獨(dú)立的平臺完成獨(dú)立的應(yīng)用開發(fā)，來滿足其控制需求。目前最主流的操作系統(tǒng)是Android和iOS，在開發(fā)同一款應(yīng)用時，不得不有兩組人員來開發(fā)和維護(hù)兩套代碼，這無疑是一種非常耗費(fèi)人力資源的解決方案。

在react-native出現(xiàn)之前，移動軟件跨平臺的解決方案多數(shù)是采用基于web的框架，如phoneGap、html5等。但是，這類框架有一個非常重大的缺陷就是用戶體驗(yàn)的問題，這類框架在iOS上的體驗(yàn)還不錯，但是在Android上就非?？D了。如果說，用這類框架只開發(fā)iOS軟件，也就失去的跨平臺的意義了。React-native是互聯(lián)網(wǎng)公司Facebook開源的移終端應(yīng)用開發(fā)的框架，可以使用JavaScript和React來開發(fā)Android和iOS的原生應(yīng)用。但是，react-native提供的組件和API基本都是針對UI的，不能滿足智能家居監(jiān)控系統(tǒng)的需求。我們可以通過抽象公共的功能模塊，在react-native的基礎(chǔ)上做原生模塊的擴(kuò)展，以此來完成智能家居監(jiān)控系統(tǒng)的開發(fā)，從而降低成本，提高開發(fā)效率。

技術(shù)實(shí)現(xiàn)要素：

有鑒于此，本發(fā)明的目的在于提供一種基于react-native實(shí)現(xiàn)智能家居監(jiān)控系統(tǒng)。

本發(fā)明的目的是通過以下技術(shù)方案來實(shí)現(xiàn)的，一種基于react-native實(shí)現(xiàn)智能家居監(jiān)控系統(tǒng)，包括UI層，JavaScript層和平臺適配層；

所述UI層包括用戶界面UI以及頁面邏輯；

所述JavaScript層包括react-native主體框架本身，以及針對智能家居移動應(yīng)用需求所封裝的JavaScript擴(kuò)展模塊；

所述平臺適配層用于對JavaScript擴(kuò)展模塊的Native進(jìn)行適配。

進(jìn)一步，所述JavaScript擴(kuò)展模塊包括數(shù)據(jù)緩存模塊、消息通信模塊、視頻監(jiān)控模塊和設(shè)備控制模塊；

所述數(shù)據(jù)緩存模塊，通過消息通信模塊與家庭網(wǎng)關(guān)網(wǎng)絡(luò)通信并解析得到環(huán)境數(shù)據(jù)、安防數(shù)據(jù)、能耗數(shù)據(jù)以及設(shè)備控制命令，環(huán)境數(shù)據(jù)、安防數(shù)據(jù)、能耗數(shù)據(jù)以及設(shè)備控制命令通過JavaScript傳遞給平臺適配層進(jìn)行關(guān)聯(lián)數(shù)據(jù)庫存儲；

所述消息通信模塊使用JavaScript封裝消息通信常用的操作接口，調(diào)用平臺適配層的消息通信模塊擴(kuò)展的方法，與家庭網(wǎng)關(guān)進(jìn)行網(wǎng)絡(luò)通信，完成設(shè)備控制命令的下發(fā)和環(huán)境數(shù)據(jù)、安防數(shù)據(jù)、能耗數(shù)據(jù)的上傳；

所述視頻監(jiān)控模塊使用JavaScript封裝常用的視頻監(jiān)控操作接口，調(diào)用平臺適配層的視頻監(jiān)控模塊擴(kuò)展的方法，完成攝像頭的操作控制和參數(shù)設(shè)置；

所述設(shè)備控制模塊，提取數(shù)據(jù)緩存模塊中的控制命令，并通過消息通信模塊將控制命令下發(fā)到家庭網(wǎng)關(guān)。

進(jìn)一步，所述對JavaScript擴(kuò)展模塊的Native進(jìn)行適配包括db緩存文件模塊擴(kuò)展、消息通信模塊擴(kuò)展和視頻監(jiān)控模塊擴(kuò)展；

所述db緩存模塊擴(kuò)展使用原生語言封裝數(shù)據(jù)庫常用的操作接口，并將這些接口導(dǎo)出，供JavaScript層相應(yīng)的JS方法調(diào)用；

所述消息通信模塊擴(kuò)展使用原生語言封裝UDP常用的操作接口，并將這些接口導(dǎo)出，供JavaScript層相應(yīng)的JS方法調(diào)用；

所述視頻監(jiān)控模塊擴(kuò)展使用原生語言封裝視頻監(jiān)控常用的操作接口，并將這些接口導(dǎo)出，供JavaScript層相應(yīng)的JS方法調(diào)用。

由于采用以上技術(shù)方案，本發(fā)明具有以下優(yōu)點(diǎn)：

UI層使用JavaScript作為開發(fā)語言，采用react-native的UI組件，能夠快速的開發(fā)UI界面以及同時適配Android和iOS；JavaScript層除了可以直接使用react-native框架本身的API，更將大部分與智能家居監(jiān)控系統(tǒng)相關(guān)的擴(kuò)展模塊進(jìn)行了封裝，供UI層頁面邏輯調(diào)用，無需關(guān)注這部分代碼使用于何種平臺，只需專注業(yè)務(wù)邏輯，提高開發(fā)效率；原生適配層為JavaScript層中所需要調(diào)用原生API的方法做Native適配，使用callback函數(shù)完成與JavaScript層的數(shù)據(jù)交互。最終完成智能家居監(jiān)控系統(tǒng)的功能需求，同時適配了Android和iOS，極大的提高了開發(fā)效率和降低了維護(hù)成本。

附圖說明

為了使本發(fā)明的目的、技術(shù)方案和優(yōu)點(diǎn)更加清楚，下面將結(jié)合附圖對本發(fā)明作進(jìn)一步的詳細(xì)描述，其中：

圖1為本發(fā)明的基于react-native實(shí)現(xiàn)智能家居監(jiān)控系統(tǒng)原理框圖。

具體實(shí)施方式

下面將結(jié)合附圖，對本發(fā)明的優(yōu)選實(shí)施例進(jìn)行詳細(xì)的描述。

圖1為本發(fā)明的原理框圖，如圖所示，基于react-native實(shí)現(xiàn)智能家居監(jiān)控系統(tǒng)，包括UI層、JavaScript層、原生適配層。

所述UI層包括用戶UI界面和頁面邏輯，具體實(shí)現(xiàn)步驟為：

步驟一、在App根組件中設(shè)置App是否登錄的狀態(tài)this.state.isLogined，根據(jù)this.state.isLogined的值判定用戶是否登錄，從而在根組件中判定渲染登錄組件或主頁面組件，并使用AsyncStorage組件異步存儲user信息；

步驟二、在根組件中設(shè)置路由組件Navigator，通過route.params將參數(shù)傳遞到子組件中，子組件通過添加onPress屬性調(diào)用this.props.navigator的push或pop方法，選擇跳轉(zhuǎn)到新頁面或返回上級頁面；

步驟三、在路由組件中通過initialRoute設(shè)置路由初始化組件，渲染主頁面，主頁面中根據(jù)自己的需求編寫UI界面。

JavaScript層包括react-native主體框架本身，以及針對智能家居需求所封裝的幾個JavaScript擴(kuò)展模塊，包括數(shù)據(jù)緩存模塊、消息通信模塊、視頻監(jiān)控模塊和設(shè)備控制模塊等。

所述數(shù)據(jù)緩存模塊，通過消息通信模塊與家庭網(wǎng)關(guān)網(wǎng)絡(luò)通信并解析得到環(huán)境數(shù)據(jù)、安防數(shù)據(jù)、能耗數(shù)據(jù)以及設(shè)備控制命令，環(huán)境數(shù)據(jù)、安防數(shù)據(jù)、能耗數(shù)據(jù)以及設(shè)備控制命令通過JavaScript傳遞給平臺適配層進(jìn)行關(guān)聯(lián)數(shù)據(jù)庫存儲。

所述數(shù)據(jù)緩存模塊是在JavaScript層通過使用JS封裝Sqlite3常用的API接口，供上層的UI界面調(diào)用，具體實(shí)現(xiàn)步驟為：

步驟一、引入Native組件NativeModules，通過NativeModules拿到平臺適配層封裝的Sqlite原生模塊；

步驟二、封裝常用的打開、關(guān)閉、增、刪、改、查等操作在sqlite.js中，供上層的UI界面調(diào)用；

步驟三、在消息通信模塊中，將從家庭網(wǎng)關(guān)中收到的環(huán)境數(shù)據(jù)、安防數(shù)據(jù)等解析出來，再調(diào)用sqlite.js封裝好的API，將數(shù)據(jù)存入到sqlite3數(shù)據(jù)庫中，當(dāng)數(shù)據(jù)庫中的數(shù)據(jù)發(fā)生改變時，再通過this.setState方法,更新UI中的環(huán)境數(shù)據(jù)、能耗數(shù)據(jù)和觸發(fā)安防報警等功能。

所述消息通信模塊使用JavaScript封裝消息通信常用的操作接口，調(diào)用平臺適配層的消息通信模塊擴(kuò)展的方法，與家庭網(wǎng)關(guān)進(jìn)行網(wǎng)絡(luò)通信，完成設(shè)備控制命令的下發(fā)和環(huán)境數(shù)據(jù)、安防數(shù)據(jù)、能耗數(shù)據(jù)的上傳。

所述消息通信模塊是在JavaScript層使用JS封裝Udp常用的API接口，供上層的UI界面調(diào)用，具體的實(shí)現(xiàn)步驟為：

步驟一、引入Native組件NativeModules，通過NativeModules獲取到Udp原生模塊；

步驟二、封裝createSocket方法創(chuàng)建一個Udp套接字、bind方法綁定本地端口、send方法將數(shù)據(jù)發(fā)送到指定的ip和端口、on監(jiān)聽某個ip和端口廣播的數(shù)據(jù)、error方法對時間錯誤的處理、close方法關(guān)閉套接字在udpSocket.js中，供上層的UI層調(diào)用；

所述視頻監(jiān)控模塊使用JavaScript封裝常用的視頻監(jiān)控操作接口，調(diào)用平臺適配層的視頻監(jiān)控模塊擴(kuò)展的方法，完成攝像頭的操作控制和參數(shù)設(shè)置。

所述視頻監(jiān)控模塊是在JavaScript層使用JS封裝視頻監(jiān)控常用的操作接口，供上層的UI界面調(diào)用，具體實(shí)現(xiàn)步驟如下：

步驟一、引入Native組件NativeModules，通過NativeModules獲取到VedioControl原生模塊；

步驟二、封裝打開、關(guān)閉、上移、下移、左移、右移等方法，供上層的UI界面邏輯調(diào)用；

步驟三、封裝設(shè)置監(jiān)控參數(shù)等方法，包括攝像頭的ip、端口、用戶信息等，供上層的UI界面邏輯調(diào)用。

所述設(shè)備控制模塊，提取數(shù)據(jù)緩存模塊中的控制命令，并通過消息通信模塊將控制命令下發(fā)到家庭網(wǎng)關(guān)。

所述設(shè)備控制模塊是在JavaScript層對消息通信模塊以及數(shù)據(jù)緩存模塊的調(diào)用的封裝，供上層UI界面調(diào)用，具體實(shí)現(xiàn)步驟如下：

步驟一、引入udpSocket.js和sqlite.js；

步驟二、調(diào)用udpSocket.js的方法，創(chuàng)建一個udpSocket，并綁定本地端口；

步驟三、調(diào)用sqlite的方法，查詢到db文件中存儲的控制命令配置文件的存儲路徑，并解析獲取到控制命令；

步驟四、調(diào)用udpSocket.js的send方法，將控制數(shù)據(jù)發(fā)送到家庭網(wǎng)關(guān)的ip和端口；

步驟五、發(fā)送成功后，通過this.setState方法更新UI組件的狀態(tài)。

所述平臺適配層對上述相對應(yīng)的移動平臺做擴(kuò)展模塊的Native(Android和iOS)適配，完成JavaScript層的JS與平臺適配層的原生語言數(shù)據(jù)交互，包括db緩存文件模塊擴(kuò)展、消息通信模塊擴(kuò)展和視頻監(jiān)控模塊擴(kuò)展等：

所述db緩存文件模塊擴(kuò)展，分別在Android和iOS平臺中使用原生語言對JavaScript層的數(shù)據(jù)緩存模塊做Native適配，具體實(shí)現(xiàn)步驟如下：

步驟一、iOS中定義一個sqlite類實(shí)現(xiàn)RCTBridgeModule協(xié)議，Android中定義一個sqlite類繼承ReactContextBaseJavaModule類；

步驟二、iOS使用Objective-c語言，Android使用java語言編寫常用的打開、關(guān)閉、增、刪、改、查等操作及錯誤事件處理方法；

步驟三、iOS使用RCT_EXPORT_METHOD()宏來聲明方法，Android使用Java注解@ReactMethod，將原生方法導(dǎo)出，并使用回調(diào)函數(shù)callback完成JavaScript與原生語言的數(shù)據(jù)交互。

所述消息通信模塊擴(kuò)展，分別在Android和iOS平臺中使用原生語言對JavaScript層的消息通信模塊做Native適配，具體實(shí)現(xiàn)步驟如下：

步驟一、iOS中定義一個UdpSocket類實(shí)現(xiàn)RCTBridgeModule協(xié)議，Android中定義一個UdpSocket類繼承ReactContextBaseJavaModule類；

步驟二、使用原生語言編寫createSocket、bind、send、close、ReceiveData等方法；

步驟三、iOS使用RCT_EXPORT_METHOD()宏來聲明方法，Android使用Java注解@ReactMethod，將上述原生方法導(dǎo)出，并使用回調(diào)函數(shù)callback完成JavaScript與原生語言的數(shù)據(jù)交互。

所述視頻監(jiān)控模塊擴(kuò)展，接入第三方的視頻監(jiān)控SDK，并分別在Android和iOS平臺使用原生語言對JavaScript層的視頻監(jiān)控做Native適配，具體實(shí)現(xiàn)步驟如下：

步驟一、引入第三方的視頻監(jiān)控SDK，并初始化；

步驟二、iOS通過把UIView傳遞給第三方視頻SDK去進(jìn)行視頻流解碼繪制，Android使用Activity的SurfaceHolder傳遞給第三方視頻SDK完成視頻流的解碼繪制，從而播放視頻；

步驟三、使用原生語言編寫打開、關(guān)閉、上移、下移、左移、右移、設(shè)置監(jiān)控參數(shù)等方法，并使用回調(diào)函數(shù)callback完成JavaScript與原生語言的數(shù)據(jù)交互，完成UI的控制。

最后說明的是，以上優(yōu)選實(shí)施例僅用以說明本發(fā)明的技術(shù)方案而非限制，盡管通過上述優(yōu)選實(shí)施例已經(jīng)對本發(fā)明進(jìn)行了詳細(xì)的描述，但本領(lǐng)域技術(shù)人員應(yīng)當(dāng)理解，可以在形式上和細(xì)節(jié)上對其作出各種各樣的改變，而不偏離本發(fā)明權(quán)利要求書所限定的范圍。