CN106685726A - 基于react‑native实现智能家居监控系统 - Google Patents

Abstract

本发明涉及一种基于react‑native实现智能家居监控系统，包括UI层，JavaScript层和平台适配层；所述UI层包括用户界面UI以及页面逻辑；所述JavaScript层包括react‑native主体框架本身，以及针对智能家居移动应用需求所封装的JavaScript扩展模块；所述平台适配层用于对JavaScript扩展模块的Native进行适配。本发明的智能家居监控系统同时适配了Android和iOS，极大的提高了开发效率和降低了维护成本。

Description

基于react-native实现智能家居监控系统

技术领域

本发明涉及智能家居及物联网技术领域，特别涉及一种基于react-native实现智能家居监控系统。

背景技术

智能家居系统是一个集硬件、软件和通信等多种技术为一体的应用系统，其中移动终端作为用户操作行为的接口，拥有远程控制、监测等多种功能。通常这类控制软件都是基于独立的平台完成独立的应用开发，来满足其控制需求。目前最主流的操作系统是Android和iOS，在开发同一款应用时，不得不有两组人员来开发和维护两套代码，这无疑是一种非常耗费人力资源的解决方案。

在react-native出现之前，移动软件跨平台的解决方案多数是采用基于web的框架，如phoneGap、html5等。但是，这类框架有一个非常重大的缺陷就是用户体验的问题，这类框架在iOS上的体验还不错，但是在Android上就非常卡顿了。如果说，用这类框架只开发iOS软件，也就失去的跨平台的意义了。React-native是互联网公司Facebook开源的移终端应用开发的框架，可以使用JavaScript和React来开发Android和iOS的原生应用。但是，react-native提供的组件和API基本都是针对UI的，不能满足智能家居监控系统的需求。我们可以通过抽象公共的功能模块，在react-native的基础上做原生模块的扩展，以此来完成智能家居监控系统的开发，从而降低成本，提高开发效率。

发明内容

有鉴于此，本发明的目的在于提供一种基于react-native实现智能家居监控系统。

本发明的目的是通过以下技术方案来实现的，一种基于react-native实现智能家居监控系统，包括UI层，JavaScript层和平台适配层；

所述UI层包括用户界面UI以及页面逻辑；

所述JavaScript层包括react-native主体框架本身，以及针对智能家居移动应用需求所封装的JavaScript扩展模块；

所述平台适配层用于对JavaScript扩展模块的Native进行适配。

进一步，所述JavaScript扩展模块包括数据缓存模块、消息通信模块、视频监控模块和设备控制模块；

所述数据缓存模块，通过消息通信模块与家庭网关网络通信并解析得到环境数据、安防数据、能耗数据以及设备控制命令，环境数据、安防数据、能耗数据以及设备控制命令通过JavaScript传递给平台适配层进行关联数据库存储；

所述消息通信模块使用JavaScript封装消息通信常用的操作接口，调用平台适配层的消息通信模块扩展的方法，与家庭网关进行网络通信，完成设备控制命令的下发和环境数据、安防数据、能耗数据的上传；

所述视频监控模块使用JavaScript封装常用的视频监控操作接口，调用平台适配层的视频监控模块扩展的方法，完成摄像头的操作控制和参数设置；

所述设备控制模块，提取数据缓存模块中的控制命令，并通过消息通信模块将控制命令下发到家庭网关。

进一步，所述对JavaScript扩展模块的Native进行适配包括db缓存文件模块扩展、消息通信模块扩展和视频监控模块扩展；

所述db缓存模块扩展使用原生语言封装数据库常用的操作接口，并将这些接口导出，供JavaScript层相应的JS方法调用；

所述消息通信模块扩展使用原生语言封装UDP常用的操作接口，并将这些接口导出，供JavaScript层相应的JS方法调用；

所述视频监控模块扩展使用原生语言封装视频监控常用的操作接口，并将这些接口导出，供JavaScript层相应的JS方法调用。

由于采用以上技术方案，本发明具有以下优点：

UI层使用JavaScript作为开发语言，采用react-native的UI组件，能够快速的开发UI界面以及同时适配Android和iOS；JavaScript层除了可以直接使用react-native框架本身的API，更将大部分与智能家居监控系统相关的扩展模块进行了封装，供UI层页面逻辑调用，无需关注这部分代码使用于何种平台，只需专注业务逻辑，提高开发效率；原生适配层为JavaScript层中所需要调用原生API的方法做Native适配，使用callback函数完成与JavaScript层的数据交互。最终完成智能家居监控系统的功能需求，同时适配了Android和iOS，极大的提高了开发效率和降低了维护成本。

附图说明

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步的详细描述，其中：

图1为本发明的基于react-native实现智能家居监控系统原理框图。

具体实施方式

下面将结合附图，对本发明的优选实施例进行详细的描述。

图1为本发明的原理框图，如图所示，基于react-native实现智能家居监控系统，包括UI层、JavaScript层、原生适配层。

所述UI层包括用户UI界面和页面逻辑，具体实现步骤为：

步骤一、在App根组件中设置App是否登录的状态this.state.isLogined，根据this.state.isLogined的值判定用户是否登录，从而在根组件中判定渲染登录组件或主页面组件，并使用AsyncStorage组件异步存储user信息；

步骤二、在根组件中设置路由组件Navigator，通过route.params将参数传递到子组件中，子组件通过添加onPress属性调用this.props.navigator的push或pop方法，选择跳转到新页面或返回上级页面；

步骤三、在路由组件中通过initialRoute设置路由初始化组件，渲染主页面，主页面中根据自己的需求编写UI界面。

JavaScript层包括react-native主体框架本身，以及针对智能家居需求所封装的几个JavaScript扩展模块，包括数据缓存模块、消息通信模块、视频监控模块和设备控制模块等。

所述数据缓存模块，通过消息通信模块与家庭网关网络通信并解析得到环境数据、安防数据、能耗数据以及设备控制命令，环境数据、安防数据、能耗数据以及设备控制命令通过JavaScript传递给平台适配层进行关联数据库存储。

所述数据缓存模块是在JavaScript层通过使用JS封装Sqlite3常用的API接口，供上层的UI界面调用，具体实现步骤为：

步骤一、引入Native组件NativeModules，通过NativeModules拿到平台适配层封装的Sqlite原生模块；

步骤二、封装常用的打开、关闭、增、删、改、查等操作在sqlite.js中，供上层的UI界面调用；

步骤三、在消息通信模块中，将从家庭网关中收到的环境数据、安防数据等解析出来，再调用sqlite.js封装好的API，将数据存入到sqlite3数据库中，当数据库中的数据发生改变时，再通过this.setState方法,更新UI中的环境数据、能耗数据和触发安防报警等功能。

所述消息通信模块使用JavaScript封装消息通信常用的操作接口，调用平台适配层的消息通信模块扩展的方法，与家庭网关进行网络通信，完成设备控制命令的下发和环境数据、安防数据、能耗数据的上传。

所述消息通信模块是在JavaScript层使用JS封装Udp常用的API接口，供上层的UI界面调用，具体的实现步骤为：

步骤一、引入Native组件NativeModules，通过NativeModules获取到Udp原生模块；

步骤二、封装createSocket方法创建一个Udp套接字、bind方法绑定本地端口、send方法将数据发送到指定的ip和端口、on监听某个ip和端口广播的数据、error方法对时间错误的处理、close方法关闭套接字在udpSocket.js中，供上层的UI层调用；

所述视频监控模块使用JavaScript封装常用的视频监控操作接口，调用平台适配层的视频监控模块扩展的方法，完成摄像头的操作控制和参数设置。

所述视频监控模块是在JavaScript层使用JS封装视频监控常用的操作接口，供上层的UI界面调用，具体实现步骤如下：

步骤一、引入Native组件NativeModules，通过NativeModules获取到VedioControl原生模块；

步骤二、封装打开、关闭、上移、下移、左移、右移等方法，供上层的UI界面逻辑调用；

步骤三、封装设置监控参数等方法，包括摄像头的ip、端口、用户信息等，供上层的UI界面逻辑调用。

所述设备控制模块，提取数据缓存模块中的控制命令，并通过消息通信模块将控制命令下发到家庭网关。

所述设备控制模块是在JavaScript层对消息通信模块以及数据缓存模块的调用的封装，供上层UI界面调用，具体实现步骤如下：

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

步骤二、调用udpSocket.js的方法，创建一个udpSocket，并绑定本地端口；

步骤三、调用sqlite的方法，查询到db文件中存储的控制命令配置文件的存储路径，并解析获取到控制命令；

步骤四、调用udpSocket.js的send方法，将控制数据发送到家庭网关的ip和端口；

步骤五、发送成功后，通过this.setState方法更新UI组件的状态。

所述平台适配层对上述相对应的移动平台做扩展模块的Native(Android和iOS)适配，完成JavaScript层的JS与平台适配层的原生语言数据交互，包括db缓存文件模块扩展、消息通信模块扩展和视频监控模块扩展等：

所述db缓存文件模块扩展，分别在Android和iOS平台中使用原生语言对JavaScript层的数据缓存模块做Native适配，具体实现步骤如下：

步骤一、iOS中定义一个sqlite类实现RCTBridgeModule协议，Android中定义一个sqlite类继承ReactContextBaseJavaModule类；

步骤二、iOS使用Objective-c语言，Android使用java语言编写常用的打开、关闭、增、删、改、查等操作及错误事件处理方法；

步骤三、iOS使用RCT_EXPORT_METHOD()宏来声明方法，Android使用Java注解@ReactMethod，将原生方法导出，并使用回调函数callback完成JavaScript与原生语言的数据交互。

所述消息通信模块扩展，分别在Android和iOS平台中使用原生语言对JavaScript层的消息通信模块做Native适配，具体实现步骤如下：

步骤一、iOS中定义一个UdpSocket类实现RCTBridgeModule协议，Android中定义一个UdpSocket类继承ReactContextBaseJavaModule类；

步骤二、使用原生语言编写createSocket、bind、send、close、ReceiveData等方法；

步骤三、iOS使用RCT_EXPORT_METHOD()宏来声明方法，Android使用Java注解@ReactMethod，将上述原生方法导出，并使用回调函数callback完成JavaScript与原生语言的数据交互。

所述视频监控模块扩展，接入第三方的视频监控SDK，并分别在Android和iOS平台使用原生语言对JavaScript层的视频监控做Native适配，具体实现步骤如下：

步骤一、引入第三方的视频监控SDK，并初始化；

步骤二、iOS通过把UIView传递给第三方视频SDK去进行视频流解码绘制，Android使用Activity的SurfaceHolder传递给第三方视频SDK完成视频流的解码绘制，从而播放视频；

步骤三、使用原生语言编写打开、关闭、上移、下移、左移、右移、设置监控参数等方法，并使用回调函数callback完成JavaScript与原生语言的数据交互，完成UI的控制。

最后说明的是，以上优选实施例仅用以说明本发明的技术方案而非限制，尽管通过上述优选实施例已经对本发明进行了详细的描述，但本领域技术人员应当理解，可以在形式上和细节上对其作出各种各样的改变，而不偏离本发明权利要求书所限定的范围。

Claims (3)

1.一种基于react-native实现智能家居监控系统，其特征在于：包括UI层，JavaScript层和平台适配层；

所述UI层包括用户界面UI以及页面逻辑；

所述JavaScript层包括react-native主体框架本身，以及针对智能家居移动应用需求所封装的JavaScript扩展模块；

所述平台适配层用于对JavaScript扩展模块的Native进行适配。

2.根据权利要求1所述的基于react-native实现智能家居监控系统，其特征在于：所述JavaScript扩展模块包括数据缓存模块、消息通信模块、视频监控模块和设备控制模块；

所述数据缓存模块，通过消息通信模块与家庭网关网络通信并解析得到环境数据、安防数据、能耗数据以及设备控制命令，环境数据、安防数据、能耗数据以及设备控制命令通过JavaScript传递给平台适配层进行关联数据库存储；

所述消息通信模块使用JavaScript封装消息通信常用的操作接口，调用平台适配层的消息通信模块扩展的方法，与家庭网关进行网络通信，完成设备控制命令的下发和环境数据、安防数据、能耗数据的上传；

所述视频监控模块使用JavaScript封装常用的视频监控操作接口，调用平台适配层的视频监控模块扩展的方法，完成摄像头的操作控制和参数设置；

所述设备控制模块，提取数据缓存模块中的控制命令，并通过消息通信模块将控制命令下发到家庭网关。

3.根据权利要求2所述的基于react-native实现智能家居监控系统，其特征在于：所述对JavaScript扩展模块的Native进行适配包括db缓存文件模块扩展、消息通信模块扩展和视频监控模块扩展；

所述db缓存模块扩展使用原生语言封装数据库常用的操作接口，并将这些接口导出，供JavaScript层相应的JS方法调用；

所述消息通信模块扩展使用原生语言封装UDP常用的操作接口，并将这些接口导出，供JavaScript层相应的JS方法调用；

所述视频监控模块扩展使用原生语言封装视频监控常用的操作接口，并将这些接口导出，供JavaScript层相应的JS方法调用。