近几年来,前端技术发展迅猛。前端日趋组件化和复杂化,并且随着手机端混生开发的兴起和桌面程序框架如electron的出现,前端几乎覆盖了由服务器到浏览器到手机端再到桌面程序如此巨大的开发范围。但是,问题也出现了,对于日趋饱满甚至过剩的前端组件、框架,在进行开发人员的过渡时,都需要重新掌握这些知识,增加了学习成本。而往往由于每个人的内在知识体系不同,对于框架的选择也是偏重不同,增加了框架变动的机率,这对于继承过往封装、开发出的优秀组件,无疑是没有帮助的。本文通过对上述问题和开发需求的分析,设计并实现了基于react-native的原型设计开发工具,采用菜单辅助团队管理、维护组件,并通过内部实现的GUI模块透明化应用框架,使得同一个团队可以采用一个工具完成多个端的开发任务。开发人员可以采用该原型设计工具,借由该工具内的gui辅助设计模块快速完成手机app或者网页的原型设计并生成代码,节省技术调研的学习成本。基于react-native的原型设计工具采用electron框架提供运行时环境,electron由主线程和ui线程构成,彼此通过消息转发进行交互。对于需要操作本地资源以及权限需求的业务分配在主线程进行开发,而对于原型设计工具的界面以及界面的消息收发处理和远程数据拉取分配在ui线程进行开发。本原型设计工具的主线程部分由ipc消息转发模块、源代码语法解析模块、本地资源模块构成。ipc消息转发负责将菜单、npm配置等消息发送至ui线程和监听ui线程的消息并转发至其它模块。源代码语法解析采用babylon插件对源代码进行解析,并转换成语法树并返回。本地资源主要完成文件操作、本地npm组件安装和配置、react-native工程创建功能。ui线程部分根据前端界面可划分为辅助ui设计模块、文件模块、编辑器模块、组件库模块。辅助ui设计负责提供开发人员针对react-native页面文件的实时界面预览、属性编辑、结点添加和删除等功能。文件模块采用文件资源树的界面构成提供操作文件的功能,当开发人件在资源树上进行文件创建或者删除等操作时,文件模块将操作信息写入进ipc消息并发送给主进程的ipc模块,等待操作完成。编辑器负责编辑器实例创建、删除等其它管理操作,同时编辑器模块负责提供当前文件的最新内容给文件模块去进行文件保存。组件库模块负责拉取远程组件库信息并提供拖拽生成组件模板代码的功能。基于react-native手机框架的原型设计工具从组件管理、原型设计和底层应用框架透明化三个角度进行效率和时间成本相关问题的解决。同时,本原型设计工具考虑到ide的迁移成本问题,还针对eclipse平台进行了相关模块的移植,使得eclipse用户可以基于原本ide完成react-native页面文件的界面预览等原型设计功能。