CN112181396A - Rn代码自动生成系统、方法、设备及介质 - Google Patents

Abstract

本发明公开了一种RN代码自动生成系统、方法、设备及介质，其中所述RN代码自动生成系统包括编辑模块和代码生成模块；所述编辑模块用于获取显示界面显示的组件的属性信息和布局信息，并根据所述属性信息和布局信息生成语法树，以及发送所述语法树至所述代码生成模块，所述代码生成模块用于解析所述语法树并根据RN代码规范生成RN代码。本发明通过获取显示界面显示的组件的属性信息和布局信息，并根据属性信息和布局信息生成语法树，通过解析语法树并根据RN代码规范自动生成RN代码，可保证灵活性的同时不失便捷性，提高代码编写的效率，同时也可保证代码编写的一致性，利于代码的后期维护。

Description

RN代码自动生成系统、方法、设备及介质

技术领域

本发明涉及计算机领域，尤其涉及一种RN(原生移动应用)代码自动生成系统、方法、设备及介质。

背景技术

React Native(一种移动应用开发框架，简称RN)技术广泛应用于需要快速迭代的需求，像银行、电商、政府、企业等各行各业的需求都可以通过React Native技术开发实现。React Native具有跨平台、快速迭代等特性，使用React Native可以维护多种平台(Android(安卓)和IOS(苹果公司开发的移动操作系统))的同一份逻辑核心代码来创建原生APP(手机软件)。

然而当前大部分的React Native项目开发仍然处于比较低水平的个人开发方式，代码结构混乱，不同开发人员的编码规范不一致，界面开发对新手不友好等各种问题普遍存在，使React Native项目开发使用处于低效率、高成本、低产出的状态。如何实现智能、快速、简单进行React Native项目开发已经成为亟待解决的问题。

发明内容

本发明的实施例要解决的技术问题是为了克服现有技术中React Native项目开发低效率、高成本、低产出的缺陷，提供一种RN代码自动生成系统、方法、设备及介质。

本发明的实施例是通过下述技术方案来解决上述技术问题：

一种RN代码自动生成方法，所述RN代码自动生成方法包括：

获取显示界面显示的组件的属性信息和布局信息；

根据所述属性信息和布局信息生成语法树；

解析所述语法树并根据RN代码规范生成RN代码。

较佳地，所述获取显示界面显示的组件的属性信息和布局信息，并根据所述属性信息和布局信息生成语法树的步骤之前包括：

显示至少一待选的组件；

接收对所述待选的组件的选择，并将选中的所述待选的组件作为所述显示的组件进行预览显示。

较佳地，所述待选的组件包括基础组件、业务组件、组合组件、页面组件中的至少一种。

较佳地，所述获取显示界面显示的组件的属性信息和布局信息的步骤之前还包括：

将所述显示的组件设置于预设的目标位置。

较佳地，所述设置于预设的目标位置的方式为拖拽。

较佳地，所述显示的组件的属性信息包括效果显示信息，所述获取显示界面显示的组件的属性信息和布局信息的步骤还包括：

根据所述效果显示信息显示所述显示的组件。

较佳地，所述获取显示界面显示的组件的属性信息和布局信息的步骤还包括：

接收对所述属性信息和/或所述布局信息的编辑。

较佳地，所述语法树包括领域专用语言信息，所述解析所述语法树并根据RN代码规范生成RN代码的步骤包括：

构建领域专用语言模板；

根据所述领域专用语言模板和所述属性信息生成所述领域专用语言信息；

根据RN代码规范解析所述领域专用语言信息并生成所述RN代码。

较佳地，所述解析所述语法树并根据RN代码规范生成RN代码的步骤还包括：

根据WEB网页代码规范解析所述领域专用语言信息生成WEB代码和/或小程序代码。

较佳地，所述解析所述语法树并根据RN代码规范生成RN代码的步骤还包括：

将所述RN代码根据所述属性信息和/或所述布局信息进行切分，将切分后的所述RN代码保存至不同的文档中。

较佳地，所述将所述RN代码根据所述属性信息和/或所述布局信息进行切分，将切分后的所述RN代码保存至不同的文档中之后的步骤还包括：

对每个所述文档中的代码按照预设功能区域进行排布。

较佳地，所述获取显示界面显示的组件的属性信息和布局信息的步骤之前还包括：

接收对所述显示的组件的选择，并将选中的所述显示的组件进行功能操作。

较佳地，所述功能操作包括复制、粘贴、剪切、删除、撤销、重复上一次操作、设备类型选择中的至少一种。

较佳地，所述解析所述语法树并根据RN代码规范生成RN代码的步骤之后还包括：

根据所述RN代码规范对所述RN代码进行检测，并根据检测结果生成检测报告。

一种RN代码自动生成系统，所述RN代码自动生成系统包括编辑模块和代码生成模块；

所述编辑模块用于获取显示界面显示的组件的属性信息和布局信息，并根据所述属性信息和布局信息生成语法树，以及发送所述语法树至所述代码生成模块，所述代码生成模块用于解析所述语法树并根据RN代码规范生成RN代码。

一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上所述的RN代码自动生成方法。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的RN代码自动生成方法的步骤。

本发明的积极进步效果在于：

本发明的实施例通过获取显示界面显示的组件的属性信息和布局信息，并根据属性信息和布局信息生成语法树，通过解析语法树并根据RN代码规范自动生成RN代码，可保证灵活性的同时不失便捷性，提高代码编写的效率，同时也可保证代码编写的一致性，利于代码的后期维护。

附图说明

图1为本发明的实施例1的RN代码自动生成系统的模块示意图。

图2为本发明的实施例2的RN代码自动生成方法的流程图。

图3为本发明的实施例2的RN代码自动生成方法的步骤201前的步骤的流程图。

图4为本发明的实施例2的RN代码自动生成方法的步骤203的流程图。

图5为本发明的实施例2的RN代码自动生成方法的步骤2033的流程图。

图6为本发明的实施例2的RN代码自动生成方法的步骤204的流程图。

图7为本发明的实施例19提供的一种电子设备的结构示意图。

具体实施方式

下面通过实施例的方式进一步说明本发明，但并不因此将本发明限制在所述的实施例范围之中。

实施例1

本实施例提供一种RN代码自动生成系统，如图1所示，RN代码自动生成系统包括编辑模块101和代码生成模块102。

编辑模块101用于获取显示界面显示的组件的属性信息和布局信息，并根据属性信息和布局信息生成语法树，以及发送语法树至代码生成模块102，代码生成模块102用于解析语法树并根据RN代码规范生成RN代码。

本实施例通过获取显示界面显示的组件的属性信息和布局信息，并根据属性信息和布局信息生成语法树，通过解析语法树并根据RN代码规范自动生成RN代码，可保证灵活性的同时不失便捷性，提高代码编写的效率，同时也可保证代码编写的一致性，利于代码的后期维护。

实施例2

本实施例提供一种RN代码自动生成系统，本实施例与实施例1相比，其区别在于，更具体的，本实施例通过React(一种万维网开发工具)、Antd(一种UI(用户界面)设计语言)、Redux(一个面向JavaScript(一种直译式脚本语言)应用的可预测状态容器)和ReactDnd(一种React高阶组件)实现。

编辑模块101还用于显示至少一待选的组件，以及接收对待选的组件的选择，并将选中的待选的组件作为显示的组件进行预览显示。

更具体地，待选的组件包括基础组件、业务组件、组合组件、页面组件中的至少一种。

在React框架下，集成Antd的UI显示功能，利用Antd的基础组件构建业务组件、组合组件、页面组件。

基础组件与React Native框架下的各个组件一一对应。

组合组件为自定义的组件组合，由各个基础组件组合而来，比如常见的商品图卡片UI，由文本组件、图片组件等基础组件组合而成，可以轻松解决不同业务中重复UI的问题。

页面组件，也为自定义的组件组合，其与组合组件不同之处在于页面组件是一个完整的页面，由基础组件、组合组件或者两者组合而成，具有比组合组件更加丰富的UI，可以解决常用活动页大致相同的UI重复开发问题。

通过对最小粒度基础组件的支持，在其基础上扩展成丰富的业务组件，保留灵活性的同时也不失便捷。提供多个基础组件组合搭建形成的组合组件以及页面组件，通过将多个基础组件组合搭建成业务使用的视图组件，为开发者带来方便，省去了每次需要从基础组件开始搭建的重复与麻烦，提高了工作效率。

为提高界面显示友好性能，增强用户良好的使用感受，显示的组件的属性信息包括效果显示信息，根据效果显示信息显示显示的组件。

实时渲染由显示的组件形成的UI界面，并进行实时预览功能，能使开发者在第一时间发现并解决问题，节约开发时间。

也可以通过对属性信息的编辑，利用编辑的内容实现用户对显示效果的定制。通过对显示的组件进行生动的渲染显示，一方面可增加画面的美观，另一方面，也可使得操作用户感觉界面友好。具体的属性信息一般包括显示的组件通用的属性，比如宽度、高度等信息，还包含各个组件特有的属性，比如基础组件中的文本组件的行高属性等信息。

编辑模块101还用于将显示的组件设置于预设的目标位置。

设置于预设的目标位置的方式可拖拽的方式。

通过在待选的组件中进行选择并将选中的组件拖拽至预设的位置，生成用户满意的显示界面。

本实施例利用React Dnd实现拖拽的功能，支持随意拖拽、拖拽动画、不同层级之间的拖拽。在拖拽过程中还可以实现操作的动画提示，方便开发者操作。经过拖拽操作后，可以形成丰富的组件层级结构，用于满足各类业务界面开发的需要。

预设的目标位置也可以进行调整，通过接收对布局信息的编辑，利用编辑的内容可实现用户对预设的目标位置的定制调整。

为便于用户操作，还可以通过显示用户帮助文档以及文档对象模型结构展示功能展示给用户。

编辑模块101还用于接收对显示的组件的选择，并将选中的显示的组件进行功能操作。

功能操作包括复制、粘贴、剪切、删除、撤销、重复上一次操作、设备类型选择中的至少一种。

允许将复制选中的显示的组件粘贴到新的位置，从而简化相同UI的拖拽操作；删除功能可方便快速的删除一个或者多个不需要的显示的组件；撤销重做历史功能，开发者的每一次产生的预览界面对应的状态都会保存在内部历史记录中，在这基础上可实现开发者撤销、重做上一步的操作，大大减少误操作带来的影响。

其中设备类型选择负责将预览的显示界面修改为不同设备像素尺寸的功能。比如不同型号的苹果手机设备和不同型号的安卓手机设备都分别具有不同的屏幕像素尺寸，该功能可以设置在不同设备情况下，显示界面展示不同的界面尺寸。

语法树包括领域专用语言信息，代码生成模块102还用于构建领域专用语言模板，并根据领域专用语言模板和属性信息生成领域专用语言信息，以及根据RN代码规范解析领域专用语言信息并生成RN代码。

代码生成模块102还用于根据WEB网页代码规范解析领域专用语言信息生成WEB代码和/或小程序代码。

代码生成模块102还用于将RN代码根据属性信息和/或布局信息进行切分，将切分后的RN代码保存至不同的文档中。将不同的RN代码放置到不同的文档中，不同的文档也可放置于不同的文件夹，规范明确各个功能的分类。

对每个文档中的代码按照预设功能区域进行排布。

同样的也可以将WEB代码和/或小程序代码根据属性信息和/或布局信息进行切分将切分后的WEB代码和/或小程序代码保存至不同的文档中。对每个文档中的代码按照预设功能区域进行排布。

进一步地，将切分后的RN代码与对应的显示的组件显示给用户，供用户直观的查看以及修改。

本系统可自动生成React Native代码，还可以实现WEB页面以及小程序代码等自动生成的功能，进一步为代码编写工作带来便捷性。

代码生成模块102还用于根据RN代码规范对RN代码进行检测，并根据检测结果生成检测报告以确保代码简洁整齐美观便于阅读理解。

本实施例基于ESLint(一种代码规范和错误检查工具)的配置来完成对项目代码的质量检查，统一代码规范和代码质量，实现代码风格统一功能。

本实施例在React框架的基础上搭建的Web操作平台，为React Native项目开发提供更加便捷的界面编辑预览方式，友好的项目代码生成管理，以及默认统一的代码校验配置。

本实施例可以实现对各种类型的React Native项目进行开发，同时该系统平台所具有的代码生成方式能满足不同类型的业务需求开发，具备灵活的自定义功能将开发过程变得简单快速，减少了重复枯燥的代码编写过程，从而能专注于业务逻辑内容的开发，在保证代码质量的同时，缩短开发时间，提高开发效率，减少重复部分的开发成本。从而实现真正的简单、智能、快速的React Native项目开发。

实施例3

本实施例提供了一种RN代码自动生成方法，如图2所示，RN代码自动生成方法包括：

步骤201、获取显示界面显示的组件的属性信息和布局信息；

步骤202、根据属性信息和布局信息生成语法树；

步骤203、解析语法树并根据RN代码规范生成RN代码。

本实施例通过获取显示界面显示的组件的属性信息和布局信息，并根据属性信息和布局信息生成语法树，通过解析语法树并根据RN代码规范自动生成RN代码，可保证灵活性的同时不失便捷性，提高代码编写的效率，同时也可保证代码编写的一致性，利于代码的后期维护。

实施例4

本实施例提供了一种RN代码自动生成方法，本实施例与实施例3相比，其区别在于，更具体的，通过React(一种万维网开发工具)、Antd(一种UI(用户界面)设计语言)、Redux(一个面向JavaScript(一种直译式脚本语言)应用的可预测状态容器)和React Dnd(一种React高阶组件)实现。

如图3所示，步骤201之前还包括显示界面显示的组件的预览以及选择调整功能步骤，具体包括：

步骤2001、显示至少一待选的组件；待选的组件包括基础组件、业务组件、组合组件、页面组件中的至少一种。

在React框架下，集成Antd的UI显示功能，利用Antd的基础组件构建业务组件、组合组件、页面组件。

基础组件与React Native框架下的各个组件一一对应。

组合组件为自定义的组件组合，由各个基础组件组合而来，比如常见的商品图卡片UI，由文本组件、图片组件等基础组件组合而成，可以轻松解决不同业务中重复UI的问题。

页面组件，也为自定义的组件组合，其与组合组件不同之处在于页面组件是一个完整的页面，由基础组件、组合组件或者两者组合而成，具有比组合组件更加丰富的UI，可以解决常用活动页大致相同的UI重复开发问题。

通过对最小粒度基础组件的支持，在其基础上扩展成丰富的业务组件，保留灵活性的同时也不失便捷。提供多个基础组件组合搭建形成的组合组件以及页面组件，通过将多个基础组件组合搭建成业务使用的视图组件，为开发者带来方便，省去了每次需要从基础组件开始搭建的重复与麻烦，提高了工作效率。

如图4所示，步骤2002、接收对待选的组件的选择，并将选中的待选的组件作为显示的组件进行预览显示。

为提高界面显示友好性能，增强用户良好的使用感受，显示的组件的属性信息包括效果显示信息，根据效果显示信息显示显示的组件。

实时渲染由显示的组件形成的UI界面，并进行实时预览功能，能使开发者在第一时间发现并解决问题，节约开发时间。

也可以通过接收对属性信息的编辑，利用编辑的内容实现用户对显示效果的定制。通过对显示的组件进行生动的渲染显示，一方面可增加画面的美观，另一方面，也可使得操作用户感觉界面友好。具体的属性信息一般包括显示的组件通用的属性，比如宽度、高度等信息，还包含各个组件特有的属性，比如基础组件中的文本组件的行高属性等信息。

步骤2003、将显示的组件设置于预设的目标位置，设置于预设的目标位置的方式可以为拖拽的形式。

通过在待选的组件中进行选择并将选中的组件拖拽至预设的位置，生成用户满意的显示界面。本实施例利用React Dnd实现拖拽的功能，支持随意拖拽、拖拽动画、不同层级之间的拖拽。在拖拽过程中还可以实现操作动画提示，方便开发者操作。经过拖拽操作后，可以形成丰富的组件层级结构，用于满足各类业务界面开发的需要。

预设的目标位置也可以进行调整，通过接收对布局信息的编辑，利用编辑的内容可实现用户对预设的目标位置的定制调整。

为便于用户操作，还可以通过显示用户帮助文档以及文档对象模型结构展示功能展示给用户。

步骤2004、接收对所述显示的组件的选择，并将选中的显示的组件进行功能操作。

功能操作包括复制、粘贴、剪切、删除、撤销、重复上一次操作、设备类型选择中的至少一种。

允许将复制选中的显示的组件粘贴到新的位置，简化相同UI的拖拽操作；删除功能可方便快速的删除一个或者多个不需要的显示的组件；撤销重做历史功能，开发者的每一次产生的预览界面对应的状态都会保存在内部历史记录中，在这基础上可实现开发者撤销、重做上一步的操作，大大减少误操作带来的影响。

其中设备类型选择负责将预览的显示界面修改为不同设备像素尺寸的功能。比如不同型号的苹果手机设备和不同型号的安卓手机设备都分别具有不同的屏幕像素尺寸，该功能可以设置在不同设备情况下，显示界面展示不同界面的尺寸。

如图5所示，步骤203具体包括：

步骤2031、构建领域专用语言模板；

步骤2032、根据领域专用语言模板和属性信息生成领域专用语言信息；

步骤2033、根据RN代码规范解析领域专用语言信息并生成RN代码。

步骤2034、根据WEB网页代码规范解析领域专用语言信息生成WEB代码和/或小程序代码。

步骤2033还包括：

步骤20331、将RN代码根据属性信息和/或布局信息进行切分，将切分后的RN代码保存至不同的文档中。将不同的RN代码放置到不同的文档中，不同的文档也可放置于不同的文件夹，规范明确各个功能的分类。

步骤20332、对每个文档中的代码按照预设功能区域进行排布。确保代码简洁整齐美观便于阅读理解。

同样的也可以将WEB代码和/或小程序代码根据属性信息和/或布局信息进行切分将切分后的WEB代码和/或小程序代码保存至不同的文档中。对每个文档中的代码按照预设功能区域进行排布。

进一步地，将切分后的RN代码与对应的显示的组件显示给用户，供用户直观的查看以及修改。

本方法可自动生成React Native代码，还可以实现WEB页面以及小程序代码等自动生成的功能，进一步为代码编写工作带来便捷性。

为进一步保证代码质量，如图6所示，RN代码自动生成方法还包括：

步骤204、根据RN代码规范对RN代码进行检测，并根据检测结果生成检测报告。以确保代码简洁整齐美观便于阅读理解。

本实施例基于ESLint(一种代码规范和错误检查工具)的配置来完成对项目代码的质量检查，统一代码规范和代码质量，实现代码风格统一功能。本实施例在React框架的基础上搭建的Web操作平台，为React Native项目开发提供更加便捷的界面编辑预览方式，友好的项目代码生成管理，以及默认统一的代码校验配置。

本实施例可以实现对各种类型的React Native项目进行开发，同时该系统平台所具有的自动智能化可配置的代码生成方式能满足不同类型的业务需求开发，具备灵活的自定义功能将开发过程变得简单快速，减少了重复枯燥的代码编写过程，从而能专注于业务逻辑内容的开发，在保证代码质量的同时，缩短开发时间，提高开发效率，减少重复部分的开发成本。从而实现真正的简单、智能、快速的React Native项目开发。

实施例5

图7为本发明实施例3提供的一种电子设备的结构示意图。电子设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现实施例3或者实施例4的RN代码自动生成方法。图7显示的电子设备30仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图7所示，电子设备30可以以通用计算设备的形式表现，例如其可以为服务器设备。电子设备30的组件可以包括但不限于：上述至少一个处理器31、上述至少一个存储器32、连接不同系统组件(包括存储器32和处理器31)的总线33。

总线33包括数据总线、地址总线和控制总线。

存储器32可以包括易失性存储器，例如随机存取存储器(RAM)321和/或高速缓存存储器322，还可以进一步包括只读存储器(ROM)323。

存储器32还可以包括具有一组(至少一个)程序模块324的程序/实用工具325，这样的程序模块324包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

处理器31通过运行存储在存储器32中的计算机程序，从而执行各种功能应用以及数据处理，例如本发明实施例3或4所提供的RN代码自动生成方法。

电子设备30也可以与一个或多个外部设备34(例如键盘、指向设备等)通信。这种通信可以通过输入/输出(I/O)接口35进行。并且，模型生成的设备30还可以通过网络适配器36与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器36通过总线33与模型生成的设备30的其它模块通信。应当明白，尽管图中未示出，可以结合模型生成的设备30使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID(磁盘阵列)系统、磁带驱动器以及数据备份存储系统等。

应当注意，尽管在上文详细描述中提及了电子设备的若干单元/模块或子单元/模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

实施例6

本实施例提供了一种计算机可读存储介质，其上存储有计算机程序，程序被处理器执行时实现实施例3或实施例4所提供的RN代码自动生成方法的步骤。

其中，可读存储介质可以采用的更具体可以包括但不限于：便携式盘、硬盘、随机存取存储器、只读存储器、可擦拭可编程只读存储器、光存储器件、磁存储器件或上述的任意合适的组合。

在可能的实施方式中，本发明还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行实现实施例3或实施例4的RN代码自动生成方法中的步骤。

其中，可以以一种或多种程序设计语言的任意组合来编写用于执行本发明的程序代码，程序代码可以完全地在用户设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户设备上部分在远程设备上执行或完全在远程设备上执行。

虽然以上描述了本发明的具体实施方式，但是本领域的技术人员应当理解，这仅是举例说明，本发明的保护范围是由所附权利要求书限定的。本领域的技术人员在不背离本发明的原理和实质的前提下，可以对这些实施方式做出多种变更或修改，但这些变更和修改均落入本发明的保护范围。

Claims (17)

1.一种RN代码自动生成方法，其特征在于，所述RN代码自动生成方法包括：

获取显示界面显示的组件的属性信息和布局信息；

根据所述属性信息和布局信息生成语法树；

解析所述语法树并根据RN代码规范生成RN代码。

2.如权利要求1所述的RN代码自动生成方法，其特征在于，所述获取显示界面显示的组件的属性信息和布局信息的步骤之前包括：

显示至少一待选的组件；

接收对所述待选的组件的选择，并将选中的所述待选的组件作为所述显示的组件进行预览显示。

3.如权利要求1所述的RN代码自动生成方法，其特征在于，所述待选的组件包括基础组件、业务组件、组合组件、页面组件中的至少一种。

4.如权利要求1所述的RN代码自动生成方法，其特征在于，所述获取显示界面显示的组件的属性信息和布局信息的步骤之前还包括：

将所述显示的组件设置于预设的目标位置。

5.如权利要求4所述的RN代码自动生成方法，其特征在于，所述设置于预设的目标位置的方式为拖拽。

6.如权利要求1所述的RN代码自动生成方法，其特征在于，所述显示的组件的属性信息包括效果显示信息，所述获取显示界面显示的组件的属性信息和布局信息的步骤还包括：

根据所述效果显示信息显示所述显示的组件。

7.如权利要求1所述的RN代码自动生成方法，其特征在于，所述获取显示界面显示的组件的属性信息和布局信息的步骤还包括：

接收对所述属性信息和/或所述布局信息的编辑。

8.如权利要求1所述的RN代码自动生成方法，其特征在于，所述语法树包括领域专用语言信息，所述解析所述语法树并根据RN代码规范生成RN代码的步骤包括：

构建领域专用语言模板；

根据所述领域专用语言模板和所述属性信息生成所述领域专用语言信息；

根据RN代码规范解析所述领域专用语言信息并生成所述RN代码。

9.如权利要求8所述的RN代码自动生成方法，其特征在于，所述解析所述语法树并根据RN代码规范生成RN代码的步骤还包括：

根据WEB网页代码规范解析所述领域专用语言信息生成WEB代码和/或小程序代码。

10.如权利要求1所述的RN代码自动生成方法，其特征在于，所述解析所述语法树并根据RN代码规范生成RN代码的步骤还包括：

将所述RN代码根据所述属性信息和/或所述布局信息进行切分，将切分后的所述RN代码保存至不同的文档中。

11.如权利要求10所述的RN代码自动生成方法，其特征在于，所述将所述RN代码根据所述属性信息和/或所述布局信息进行切分，将切分后的所述RN代码保存至不同的文档中之后的步骤还包括：

对每个所述文档中的代码按照预设功能区域进行排布。

12.如权利要求1所述的RN代码自动生成方法，其特征在于，所述获取显示界面显示的组件的属性信息和布局信息的步骤之前还包括：

接收对所述显示的组件的选择，并将选中的所述显示的组件进行功能操作。

13.如权利要求12所述的RN代码自动生成方法，其特征在于，所述功能操作包括复制、粘贴、剪切、删除、撤销、重复上一次操作、设备类型选择中的至少一种。

14.如权利要求1所述的RN代码自动生成方法，其特征在于，所述解析所述语法树并根据RN代码规范生成RN代码的步骤之后还包括：

根据所述RN代码规范对所述RN代码进行检测，并根据检测结果生成检测报告。

15.一种RN代码自动生成系统，其特征在于，所述RN代码自动生成系统包括编辑模块和代码生成模块；

所述编辑模块用于获取显示界面显示的组件的属性信息和布局信息，并根据所述属性信息和布局信息生成语法树，以及发送所述语法树至所述代码生成模块，所述代码生成模块用于解析所述语法树并根据RN代码规范生成RN代码。

16.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1-14中任一项所述的RN代码自动生成方法。

17.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1-14中任一项所述的RN代码自动生成方法的步骤。

Images