基于react‑native实现智能家居监控系统技术方案

技术编号:15394957 阅读:747 留言:0更新日期:2017-05-19 06:37
本发明专利技术涉及一种基于react‑native实现智能家居监控系统,包括UI层,JavaScript层和平台适配层;所述UI层包括用户界面UI以及页面逻辑;所述JavaScript层包括react‑native主体框架本身,以及针对智能家居移动应用需求所封装的JavaScript扩展模块;所述平台适配层用于对JavaScript扩展模块的Native进行适配。本发明专利技术的智能家居监控系统同时适配了Android和iOS,极大的提高了开发效率和降低了维护成本。

Implementation of intelligent monitoring system based on native react Home Furnishing

The present invention relates to an intelligent monitoring system based on native react Home Furnishing, including UI layer, JavaScript layer and platform adaptation layer; the UI layer comprises a user interface and UI page logic; the JavaScript layer comprises a react native main frame itself, and according to the demand of smart home mobile application package JavaScript extensions module; the platform adapter layer for JavaScript extension module Native adapter. The intelligent home monitoring system of the invention is adapted to the Android and the iOS at the same time, greatly improving the development efficiency and reducing the maintenance cost.

【技术实现步骤摘要】
基于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,本文档来自技高网...
<a href="http://www.xjishu.com/zhuanli/62/201710018229.html" title="基于react‑native实现智能家居监控系统原文来自X技术">基于react‑native实现智能家居监控系统</a>

【技术保护点】
一种基于react‑native实现智能家居监控系统,其特征在于:包括UI层,JavaScript层和平台适配层;所述UI层包括用户界面UI以及页面逻辑;所述JavaScript层包括react‑native主体框架本身,以及针对智能家居移动应用需求所封装的JavaScript扩展模块;所述平台适配层用于对JavaScript扩展模块的Native进行适配。

【技术特征摘要】
1.一种基于react-native实现智能家居监控系统,其特征在于:包括UI层,JavaScript层和平台适配层;所述UI层包括用户界面UI以及页面逻辑;所述JavaScript层包括react-native主体框架本身,以及针对智能家居移动应用需求所封装的JavaScript扩展模块;所述平台适配层用于对JavaScript扩展模块的Native进行适配。2.根据权利要求1所述的基于react-native实现智能家居监控系统,其特征在于:所述JavaScript扩展模块包括数据缓存模块、消息通信模块、视频监控模块和设备控制模块;所述数据缓存模块,通过消息通信模块与家庭网关网络通信并解析得到环境数据、安防数据、能耗数据以及设备控制命令,环境数据、安防数据、能耗数据以及设备控制命令通过JavaScript传递给平台适配层进行关联数据库存储;所述消息通信模块使用JavaScript封装消息通信常用的操作接口,调用平台适配层的消息通信模块扩展的方法,与家庭网关...

【专利技术属性】
技术研发人员:付蔚廖海波王平赖宜荣杜亮郑方雄
申请(专利权)人:重庆邮电大学
类型:发明
国别省市:重庆,50

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1