CN111857709A - Mapping method and device for React component and Flutter component, electronic equipment and storage medium - Google Patents
Mapping method and device for React component and Flutter component, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN111857709A CN111857709A CN202010538409.4A CN202010538409A CN111857709A CN 111857709 A CN111857709 A CN 111857709A CN 202010538409 A CN202010538409 A CN 202010538409A CN 111857709 A CN111857709 A CN 111857709A
- Authority
- CN
- China
- Prior art keywords
- component
- flutter
- mapping
- style
- information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Withdrawn
Links
- 238000013507 mapping Methods 0.000 title claims abstract description 121
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000004590 computer program Methods 0.000 claims description 9
- 230000015654 memory Effects 0.000 claims description 7
- 230000006870 function Effects 0.000 description 8
- 238000006243 chemical reaction Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 210000001072 colon Anatomy 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
Abstract
The embodiment of the application discloses a method and a device for mapping a React component and a Flutter component, electronic equipment and a storage medium, wherein the method comprises the following steps: converting the TSX file corresponding to the React component to be mapped into an abstract syntax tree AST; acquiring a component label node in the AST, and acquiring component information under the component label node; mapping the component information to the component information of the Flutter to generate an initial Flutter component; and the initial Flutter component inherits a pre-created Flutter basic component library to generate a target Flutter component corresponding to the React component to be mapped, wherein the Flutter basic component library comprises the Flutter basic component. The embodiment of the application realizes that the React component is automatically mapped into the flute component, so that the labor cost can be reduced, the development efficiency can be improved, and the generation efficiency of the component can be improved.
Description
Technical Field
The embodiment of the application relates to the technical field of terminals, in particular to a method and a device for mapping a read component and a Flutter component, electronic equipment and a storage medium.
Background
React and Flutter are front-end development frameworks across platforms, respectively. React is an declarative, efficient, and flexible JavaScript library for building user interfaces. Flutter is a new SDK for building a cross-platform mobile phone App by Google, writes a code, and can run on both Android and iOS platforms.
In the front-end development process, read and Flutter are usually used to implement the same function, so that the front-end development process can run on more platforms. In the prior art, when the same function is realized by using the fact that the user writes corresponding codes respectively is required, the labor cost is high, and the development efficiency is low.
Disclosure of Invention
The embodiment of the application provides a method and a device for mapping a React component and a Flutter component, electronic equipment and a storage medium, which are beneficial to reducing the labor cost, improving the development efficiency and improving the component generation efficiency.
In order to solve the above problem, in a first aspect, an embodiment of the present application provides a method for mapping a read component and a Flutter component, including:
converting the TSX file corresponding to the React component to be mapped into an abstract syntax tree AST;
acquiring a component tag node in the AST, and acquiring component information under the component tag node;
Mapping the component information to the component information of the Flutter to generate an initial Flutter component;
and the initial Flutter component inherits a pre-created Flutter basic component library to generate a target Flutter component corresponding to the React component to be mapped, wherein the Flutter basic component library comprises the Flutter basic component.
In a second aspect, an embodiment of the present application provides a mapping apparatus for a read component and a Flutter component, including:
the AST generation module is used for converting the TSX file corresponding to the React component to be mapped into an abstract syntax tree AST;
a component information obtaining module, configured to obtain a component tag node in the AST, and obtain component information under the component tag node;
the component information mapping module is used for mapping the component information into the component information of the Flutter to generate an initial Flutter component;
and the Flutter component generation module is used for inheriting the initial Flutter component to a pre-created Flutter basic component library to generate a target Flutter component corresponding to the read component to be mapped, and the Flutter basic component library comprises a Flutter basic component.
In a third aspect, an embodiment of the present application further provides an electronic device, which includes a memory, a processor, and a computer program stored on the memory and executable on the processor, where the processor implements the mapping method between the read component and the Flutter component according to the embodiment of the present application when executing the computer program.
In a fourth aspect, the present application provides a computer-readable storage medium, on which a computer program is stored, where the computer program is executed by a processor to perform the steps of the method for mapping the read component and the Flutter component disclosed in the present application.
The method, the device, the electronic equipment and the storage medium for mapping the React component and the Flutter component provided by the embodiment of the application convert the TSX file corresponding to the React component to be mapped into the AST to obtain the component tag node in the AST, obtain the component information under the component tag node, map the component information into the component information of the Flutter to generate the initial Flutter component, inherit the pre-established Flutter basic component library of the initial Flutter component to generate the target Flutter component corresponding to the React component to be mapped, realize the automatic mapping of the React component into the Flutter component, ensure the one-to-one correspondence of the Flutter component and the React component through the Flutter basic component library of all basic components including the Flutter, so that a user only needs to write a React code when needing to realize the same function by using the React and the Flutter, not only can automatically realize the function of the Flutter, can reduce the labor cost and can improve the development efficiency, and compared with the method of manually writing codes to generate the Flutter component, the generation efficiency of the Flutter component can be improved.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings needed to be used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive exercise.
FIG. 1 is a flowchart of a mapping method of a React component and a Flutter component according to a first embodiment of the present application;
fig. 2 is a schematic structural diagram of a mapping apparatus of a read component and a Flutter component according to a second embodiment of the present application;
fig. 3 is a schematic structural diagram of an electronic device according to a third embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some, but not all, embodiments of the present application. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
Example one
As shown in fig. 1, the method for mapping a read component and a Flutter component provided in this embodiment includes: step 110 to step 140.
And step 110, converting the TSX file corresponding to the React component to be mapped into AST.
The TSX file is a file for declaring an read component template, JSX codes are stored in the TSX file, JSX is an extended syntax of JavaScript, the tag syntax of JSX is neither a character string nor HTML, and the fact that a User Interface (UI) should present an interactive essential form of the UI can be well described by using JSX in the read. AST (Abstract Syntax Tree) is an Abstract representation of the Syntax structure of source code, which represents the Syntax structure of a programming language in the form of a Tree, where each node on the Tree represents a structure in the source code. The to-be-mapped read component can be a built-in component in the read, the purpose of the embodiment of the application is to convert the built-in component in the read into a built-in component of Flutter, and the to-be-mapped read component can be, for example, a View component, a Text component, a Scrollview component, and the like.
When an React component needs to be mapped as a Flutter component, a TSX file corresponding to the React component to be mapped needs to be acquired first, and the TSX file corresponding to the React component to be mapped may be acquired according to a storage path of the TSX file, or a TSX file uploaded by a user may also be acquired. And analyzing the TSX file corresponding to the React component to be mapped, and converting the TSX file into AST.
Wherein, the component label node is JsxElement node, which indicates that it is a React component. The component information may include a component start identification, a tag name, a component attribute, a component style, and a component end identification.
And traversing the AST, acquiring a component label node in the AST, analyzing the component label node, and acquiring component information under the component label node.
In an embodiment of the present application, the obtaining component information under the component label node includes: acquiring a component starting identifier and a component ending identifier under the component label node; and acquiring the label name, the component attribute and the component style between the component starting identifier and the component ending identifier.
Analyzing the component label node, identifying a component starting identifier (openingElement) and a component ending identifier (JsxClosingElement), analyzing from the component starting identifier, and acquiring a label name (tagName), a component attribute (JsxAttributes) and a component style until the component ending identifier is acquired, thereby acquiring the component information under the component label node. The openingElement, the JsxClosingElement, the tagName and the JsxAttributes are all nodes in the AST, and the component attribute and the component style can be acquired by analyzing the JsxAttributes nodes.
The initial Flutter component is a piece of code that conforms to the Flutter specification, but cannot yet run in Flutter.
After the component information of the React component to be mapped is acquired, the component information of the React component to be mapped is mapped into the component information of the Flutter according to the component specification of the Flutter, and therefore an initial Flutter component (widget) conforming to the Flutter specification is generated.
In an embodiment of the present application, mapping the component information to Flutter's component information, and generating an initial Flutter component includes:
mapping the label name to a component name of Flutter;
splicing the key value pairs in the component attributes into the component attributes of the Flutter;
mapping the component style to a component style of the Flutter according to a preset style mapping relation;
mapping the component ending identifier to a component ending identifier of the Flutter;
and generating an initial Flutter component according to the component name, the component attribute, the component style and the component ending identifier of the Flutter obtained after mapping.
In the process of analyzing the component label node in the read component, after a node is obtained through analysis, the information of the node is converted into the component information of Flutter. After the tag name (tagName) is obtained through analysis, the tag name can be converted into a component name of the Flutter, a preset symbol is added after the tag name, the tag name in the read component is converted into a component (Widget) name of the Flutter component, the preset symbol is "(", namely the format of the obtained component name is "Widget name (".
Circularly traversing the component attributes (jssxattributes), obtaining an attribute key (i.e. attribute key) and an attribute value (i.e. attribute value) from the JsxAttributes, and splicing the attribute key and the attribute value by using a colon to generate the component attributes of Flutter (i.e. the attributes of Widget), for example, obtaining the attribute key _ a and the corresponding attribute value _ a from the component attributes, the generated component attributes of Flutter are "attribute key _ a: attribute value _ a ". The attribute conversion mode can be packaged as an attribute converter, so that when the attribute conversion is performed, the attribute converter is called to convert the component attribute in the fact into the component attribute in the Flutter.
The preset pattern mapping relation is used for processing the mapping of the module pattern, analyzing the JsxAttributes node, obtaining the module pattern, and mapping the module pattern into the module pattern of the Flutter according to the pattern mapping relation.
When the end-of-component identifier (jsxcmosingtelement) is resolved during the process of resolving the component tag node in the read component, the end-of-component identifier is converted into the end-of-component identifier of Flutter, i.e., converted into ")".
And according to the writing specification of the Flutter component, splicing the component name, the component attribute, the component style and the component ending identifier of the Flutter obtained after mapping, thereby generating the initial Flutter component. The format of the generated initial Flutter component may be represented as follows:
"Widget name
Attribute key _ a: attribute value _ A
Attribute key _ B: attribute value _ B
style_key：style_value
)”。
Through the analysis and the conversion, the fact that the React component is mapped to the initial Flutter component is achieved, and the subsequent inheritance Flutter basic component library is combined, so that the attributes and the styles of the components at the two ends of the React and the Flutter can be kept consistent.
In an embodiment of the present application, the mapping the component style to a component style of Flutter according to a preset style mapping relationship includes: and mapping the attribute name in the component style to the attribute name in the component style of the Flutter according to a preset style mapping relation.
The preset style mapping relationship may be a preset attribute name mapping table, and may be a mapping relationship between an attribute name in the fact component and an attribute name in the Flutter component, which is established based on naming specifications of the attribute name in the fact component and the attribute name in the Flutter component. Therefore, after the attribute name in the React component style is obtained, the attribute name in the React component style can be mapped into the attribute name in the component style of Flutter based on the style mapping relation. The attribute names in the React component style can be accurately and quickly mapped to the attribute names in the component style of the Flutter through the style mapping relation.
In an embodiment of the present application, the mapping the component style to a component style of Flutter according to a preset style mapping relationship further includes: and converting the component style into a component style written in the style writing format of the Flutter according to a preset style mapping relation.
The writing formats of the component styles in some React components and the component styles in the Flutter components are different, the preset style mapping relationship can comprise an attribute name mapping table and the mapping relationship of the style writing format, and when the writing formats of the component styles at the two ends of the React and the Flutter are different, the component styles in the React components to be mapped are converted into the component styles written in the Flutter style writing format. The mapping relationship of the style writing format can be packaged into a style processor, so that the style processor is called to realize mapping when the style writing formats of the components at the two ends of reach and Flutter are inconsistent. For example, the writing formats of the component styles in both the read and the Flutter are inconsistent, such as the inner margin attribute padding, the outer margin attribute margin, the system color attribute systemmcolor, and the like, and the mapping of the component style in the read component to be mapped to the component style in the Flutter can be realized by calling a style handler.
In one embodiment of the present application, the component information further includes child components;
mapping the component information to the component information of the Flutter to generate an initial Flutter component, including: mapping the label name, the component attribute, the component style and the component ending identifier to the component name, the component attribute, the component style and the component ending identifier of the Flutter respectively; acquiring component information of the child component; mapping the child component to a child component of Flutter, and mapping component information of the child component to component information of the child component of Flutter; and generating an initial Flutter component according to the component name, the component attribute, the component style, the child component, the component information of the child component and the component ending identifier of the Flutter.
When the AST of the React component to be mapped is analyzed to determine that the React component to be mapped comprises child components, mapping of the child components is also needed. According to the sequence in AST, mapping the component information into the component information of Flutter when analyzing a piece of component information, and respectively converting the label name, the component attribute, the component style and the component ending identifier into the component name, the component attribute, the component style and the component ending identifier of Flutter according to the above mode when analyzing the label name, the component attribute, the component style and the component ending identifier; when the child component is resolved, acquiring component information of the child component from the AST, wherein the component information of the child component comprises a component start identifier, a tag name, a component attribute, a component style and a component end identifier, and can also comprise the child component, mapping the child component to be mapped into the child component of Flutter, namely mapping into "child [", recursively calling the way of mapping the tag name, the component attribute, the component style and the component end identifier in the component to be mapped into the component name, the component attribute, the component style and the component end identifier in Flutter, mapping the tag name, the component attribute, the component style and the component end identifier in the child component into the component name, the component attribute, the component style and the component end identifier in Flutter, mapping the component end identifier of the child component into the component end identifier of the Flutter, and when the component end identifier of the child component is resolved, mapping the component end identifier of the child component to the component end identifier of the Flutter, i.e., mapped as "]".
And splicing the component name, the component attribute, the component style, the child component and the component ending identifier of the Flutter obtained after mapping according to the sequence of the tag name, the component attribute, the component style, the child component and the component ending identifier in the AST and the writing specification of the Flutter component, thereby generating the initial Flutter component. The format of the generated initial Flutter component may be represented as follows:
through the analysis and the conversion, the fact that the React component to be mapped including the child component is mapped into the initial Flutter component is achieved, and the subsequent inheritance Flutter basic component library is combined, so that the attributes and styles of the components at the two ends of the React component and the Flutter component can be kept consistent.
And 140, inheriting the initial Flutter component to a pre-created Flutter basic component library to generate a target Flutter component corresponding to the read component to be mapped, wherein the Flutter basic component library comprises a Flutter basic component.
In the prior art, any read component supports attributes such as width, height, padding, and flex, and each attribute in the corresponding read component in the Flutter needs to be implemented by one component (Widget), so that the components at the two ends of the read and the Flutter cannot be in one-to-one correspondence due to the fact that the corresponding read component needs to be combined by a plurality of components (widgets) in the Flutter, and the problem that one read component corresponds to a plurality of Flutter components may occur. The embodiment of the application can solve the problem through the Flutter basic component library. The Flutter basic component library (BaseWidget) is a set of runtime component libraries which are pre-realized on the Flutter side and have the same name as the read component, namely, the BaseWidget is declared on the Flutter side, so that the BaseWidget is formed by nesting the Flutter basic components. The basic style attributes in the React can be aligned through the Flutter basic component library, and the problem of one-to-many components is solved.
And the generated initial Flutter component inherits a pre-created Flutter basic component library, so that a target Flutter component corresponding to the read component to be mapped can be generated, and the generated target Flutter component is a component capable of running in the Flutter. The fact that one React component corresponds to one Flutter component is achieved, and the problem that one React component corresponds to a plurality of Flutter components in the prior art is solved.
Wherein the Flutter base component library may include: a Container component, a fractallysizedbox component, a Flex component, an Expanded component, an Align component, and the like. The Container component may include attributes such as width (width), height (height), border radius (border), outer edge distance (margin), inner edge distance (padding), border color (border color), and color (color). The FractinoallSizedBox component may include attributes such as width coefficient (width factor), alignment, height coefficient (height factor), and the like. The Flex component may include: direction (direction), cross axis (crossaxis), main axis (mainaxis), and the like. The Align component includes attributes such as an alignment mode (alignment), a width coefficient (width factor), and a height coefficient (height factor). The flexile component includes a child control (child) property. The Expanded component includes a child control (child) attribute.
For example, the JSX code corresponding to the View component in fact is:
by using the method for mapping the React component and the Flutter component in the embodiment of the application, the View component in the React can be mapped to the View component in the Flutter, and the View component in the Flutter obtained after mapping is represented as follows:
therefore, by the method for mapping the React component and the Flutter component, the React component can be mapped into the Flutter component, and the consistency of the attributes and the styles of the components of the two ends of the React component and the Flutter component can be kept.
The React component and the method for mapping the flute component provided by the embodiment of the application convert the TSX file corresponding to the React component to be mapped into the AST, obtain the component label node in the AST, obtain the component information under the component label node, map the component information into the component information of the flute, generate the initial flute component, inherit the initial flute basic component library created in advance to generate the target flute component corresponding to the React component to be mapped, realize the automatic mapping of the React component into the flute component, ensure the one-to-one correspondence of the flute component and the React component through the flute basic component library of all basic components including the flute, so that when a user needs to use the React and the flute to realize the same function, only need to write the React code, not only can automatically realize the function of the flute, reduce the labor cost, improve the development efficiency, and compare with manual code writing to generate the flute component, the generation efficiency of the Flutter component can be improved.
Example two
In the embodiment, as shown in fig. 2, the mapping apparatus 200 for the fact component and the Flutter component includes:
an AST generating module 210, configured to convert a TSX file corresponding to the ready component to be mapped into an abstract syntax tree AST;
a component information obtaining module 220, configured to obtain a component tag node in the AST, and obtain component information under the component tag node;
a component information mapping module 230, configured to map the component information to Flutter component information, and generate an initial Flutter component;
and the Flutter component generation module 240 is configured to inherit the initial Flutter component to a pre-created Flutter base component library, and generate a target Flutter component corresponding to the read component to be mapped, where the Flutter base component library includes a base component of Flutter.
Optionally, the component information includes a component start identifier, a tag name, a component attribute, a component style, and a component end identifier.
Optionally, the component information obtaining module includes:
the identification acquisition unit is used for acquiring a component starting identification and a component ending identification under the component label node;
And the attribute style acquisition unit is used for acquiring the label name, the component attribute and the component style between the component starting identifier and the component ending identifier.
Optionally, the component information mapping module includes:
the component name mapping unit is used for mapping the label name to the component name of the Flutter;
the component attribute mapping unit is used for splicing the key value pairs in the component attributes into the component attributes of the Flutter;
the component style mapping unit is used for mapping the component style into a component style of the Flutter according to a preset style mapping relation;
an end identifier mapping unit, configured to map the component end identifier to a component end identifier of Flutter;
and the first initial Flutter component generating unit is used for generating an initial Flutter component according to the component name, the component attribute, the component style and the component ending identifier of the Flutter obtained after mapping.
Optionally, the component style mapping unit includes:
and the attribute name mapping subunit is used for mapping the attribute name in the component style to the attribute name in the component style of the Flutter according to the preset style mapping relationship.
Optionally, the component style mapping unit further includes:
And the writing format conversion subunit is used for converting the component style into a component style written in the style writing format of the Flutter according to a preset style mapping relationship.
Optionally, the component information further includes child components;
the component information mapping module includes:
the basic information mapping unit is used for mapping the label name, the component attribute, the component style and the component ending identifier into a component name, a component attribute, a component style and a component ending identifier of the Flutter respectively;
a child component information acquisition unit configured to acquire component information of the child component;
the child component information mapping unit is used for mapping the child component to the child component of Flutter and mapping the component information of the child component to the component information of the child component of Flutter;
and the second initial Flutter component generating unit is used for generating an initial Flutter component according to the component name, the component attribute, the component style, the child component, the component information of the child component and the component ending identifier of the Flutter.
The device for mapping the React component and the Flutter component provided by the embodiment of the application is used for realizing the steps of the method for mapping the React component and the Flutter component in the first embodiment of the application, and the specific implementation modes of the modules of the device refer to the corresponding steps, which are not described herein again.
The React component and the Flutter component mapping device provided by the embodiment of the application convert the TSX file corresponding to the React component to be mapped into the AST through the AST generating module, the component information acquiring module acquires the component tag nodes in the AST and acquires the component information under the component tag nodes, the component information mapping module maps the component information into the component information of the Flutter to generate the initial Flutter component, the Flutter component generating module inherits the initial Flutter component into a pre-established Flutter basic component library to generate the target Flutter component corresponding to the React component to be mapped, so that the automatic mapping of the React component into the Flutter component is realized, the one-to-one correspondence of the Flutter components and the React components can be ensured through the Flutter basic component library of all basic components including the Flutter, and therefore, when a user needs to use the React and the Flutter to realize the same function, only a React code needs to be compiled, the function of the Flutter can be automatically realized, and the labor cost can be reduced, and the development efficiency can be improved, and compared with the method of manually writing codes to generate the Flutter component, the generation efficiency of the Flutter component can be improved.
EXAMPLE III
Embodiments of the present application also provide an electronic device, as shown in fig. 3, the electronic device 300 may include one or more processors 310 and one or more memories 320 connected to the processors 310. Electronic device 300 may also include input interface 330 and output interface 340 for communicating with another apparatus or system. Program code executed by processor 310 may be stored in memory 420.
The processor 310 in the electronic device 300 calls the program code stored in the memory 320 to execute the mapping methods of the React component and the Flutter component in the above-described embodiments.
The above elements in the above electronic device may be connected to each other by a bus, such as one of a data bus, an address bus, a control bus, an expansion bus, and a local bus, or any combination thereof.
Embodiments of the present application further provide a computer-readable storage medium, on which a computer program is stored, where the computer program, when executed by a processor, implements the steps of the method for mapping the read component and the Flutter component according to the first embodiment of the present application.
The embodiments in the present specification are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments are referred to each other. For the device embodiment, since it is basically similar to the method embodiment, the description is simple, and for the relevant points, refer to the partial description of the method embodiment.
The method, the device, the electronic device and the storage medium for mapping the read component and the Flutter component provided by the embodiment of the application are described in detail, a specific example is applied to explain the principle and the implementation of the application, and the description of the embodiment is only used for helping to understand the method and the core idea of the application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.
Through the above description of the embodiments, those skilled in the art will clearly understand that each embodiment can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware. With this understanding in mind, the above-described technical solutions may be embodied in the form of a software product, which can be stored in a computer-readable storage medium such as ROM/RAM, magnetic disk, optical disk, etc., and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the methods described in the embodiments or some parts of the embodiments.
Claims (10)
1. A method for mapping a React component and a Flutter component is characterized by comprising the following steps:
converting the TSX file corresponding to the React component to be mapped into an abstract syntax tree AST;
acquiring a component tag node in the AST, and acquiring component information under the component tag node;
mapping the component information to the component information of the Flutter to generate an initial Flutter component;
and the initial Flutter component inherits a pre-created Flutter basic component library to generate a target Flutter component corresponding to the React component to be mapped, wherein the Flutter basic component library comprises the Flutter basic component.
2. The method of claim 1, wherein the component information comprises a component start identifier, a tag name, a component property, a component style, and a component end identifier.
3. The method of claim 2, wherein obtaining component information under the component label node comprises:
acquiring a component starting identifier and a component ending identifier under the component label node;
and acquiring the label name, the component attribute and the component style between the component starting identifier and the component ending identifier.
4. The method of claim 2, wherein mapping the component information to Flutter's component information to generate an initial Flutter component comprises:
mapping the label name to a component name of Flutter;
splicing the key value pairs in the component attributes into the component attributes of the Flutter;
mapping the component style to a component style of the Flutter according to a preset style mapping relation;
mapping the component ending identifier to a component ending identifier of the Flutter;
and generating an initial Flutter component according to the component name, the component attribute, the component style and the component ending identifier of the Flutter obtained after mapping.
5. The method according to claim 4, wherein the mapping the component style to a component style of Flutter according to a preset style mapping relationship comprises:
and mapping the attribute name in the component style to the attribute name in the component style of the Flutter according to a preset style mapping relation.
6. The method according to claim 5, wherein the mapping the component style to a component style of Flutter according to a preset style mapping relationship further comprises:
and converting the component style into a component style written in the style writing format of the Flutter according to a preset style mapping relation.
7. The method of claim 2, wherein the component information further comprises child components;
mapping the component information to the component information of the Flutter to generate an initial Flutter component, including:
mapping the label name, the component attribute, the component style and the component ending identifier to the component name, the component attribute, the component style and the component ending identifier of the Flutter respectively;
acquiring component information of the child component;
mapping the child component to a child component of Flutter, and mapping component information of the child component to component information of the child component of Flutter;
And generating an initial Flutter component according to the component name, the component attribute, the component style, the child component, the component information of the child component and the component ending identifier of the Flutter.
8. A mapping apparatus for a read component and a Flutter component, comprising:
the AST generation module is used for converting the TSX file corresponding to the React component to be mapped into an abstract syntax tree AST;
a component information obtaining module, configured to obtain a component tag node in the AST, and obtain component information under the component tag node;
the component information mapping module is used for mapping the component information into the component information of the Flutter to generate an initial Flutter component;
and the Flutter component generation module is used for inheriting the initial Flutter component to a pre-created Flutter basic component library to generate a target Flutter component corresponding to the read component to be mapped, and the Flutter basic component library comprises a Flutter basic component.
9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method for mapping the React component and the Flutter component according to any one of claims 1 to 7 when executing the computer program.
10. A computer-readable storage medium, on which a computer program is stored, which program, when being executed by a processor, carries out the steps of the method for mapping a React component and a Flutter component as claimed in any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010538409.4A CN111857709A (en) | 2020-06-12 | 2020-06-12 | Mapping method and device for React component and Flutter component, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010538409.4A CN111857709A (en) | 2020-06-12 | 2020-06-12 | Mapping method and device for React component and Flutter component, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111857709A true CN111857709A (en) | 2020-10-30 |
Family
ID=72986469
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010538409.4A Withdrawn CN111857709A (en) | 2020-06-12 | 2020-06-12 | Mapping method and device for React component and Flutter component, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111857709A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112612470A (en) * | 2021-01-05 | 2021-04-06 | 北京城市网邻信息技术有限公司 | User interface file generation method and device |
| CN113064593A (en) * | 2021-04-12 | 2021-07-02 | 深圳市活力天汇科技股份有限公司 | Method and device for dynamic mobile APP, computer equipment and storage medium |
| CN114048405A (en) * | 2021-10-26 | 2022-02-15 | 盐城金堤科技有限公司 | Method, device and equipment for generating entry template file and storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6083276A (en) * | 1998-06-11 | 2000-07-04 | Corel, Inc. | Creating and configuring component-based applications using a text-based descriptive attribute grammar |
| CN109725901A (en) * | 2018-05-31 | 2019-05-07 | 中国平安人寿保险股份有限公司 | Development approach, device, equipment and the computer storage medium of front-end code |
| CN110442330A (en) * | 2019-07-05 | 2019-11-12 | 五八有限公司 | List element conversion method, device, electronic equipment and storage medium |
| CN110554875A (en) * | 2018-05-30 | 2019-12-10 | 北京三快在线科技有限公司 | Code conversion method and device, electronic equipment and storage medium |
| CN110968325A (en) * | 2019-10-28 | 2020-04-07 | 苏宁云计算有限公司 | Applet conversion method and device |
| CN111209004A (en) * | 2019-12-30 | 2020-05-29 | 北京健康之家科技有限公司 | Code conversion method and device |
-
2020
- 2020-06-12 CN CN202010538409.4A patent/CN111857709A/en not_active Withdrawn
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6083276A (en) * | 1998-06-11 | 2000-07-04 | Corel, Inc. | Creating and configuring component-based applications using a text-based descriptive attribute grammar |
| CN110554875A (en) * | 2018-05-30 | 2019-12-10 | 北京三快在线科技有限公司 | Code conversion method and device, electronic equipment and storage medium |
| CN109725901A (en) * | 2018-05-31 | 2019-05-07 | 中国平安人寿保险股份有限公司 | Development approach, device, equipment and the computer storage medium of front-end code |
| CN110442330A (en) * | 2019-07-05 | 2019-11-12 | 五八有限公司 | List element conversion method, device, electronic equipment and storage medium |
| CN110968325A (en) * | 2019-10-28 | 2020-04-07 | 苏宁云计算有限公司 | Applet conversion method and device |
| CN111209004A (en) * | 2019-12-30 | 2020-05-29 | 北京健康之家科技有限公司 | Code conversion method and device |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112612470A (en) * | 2021-01-05 | 2021-04-06 | 北京城市网邻信息技术有限公司 | User interface file generation method and device |
| CN112612470B (en) * | 2021-01-05 | 2022-04-22 | 北京城市网邻信息技术有限公司 | User interface file generation method and device |
| CN113064593A (en) * | 2021-04-12 | 2021-07-02 | 深圳市活力天汇科技股份有限公司 | Method and device for dynamic mobile APP, computer equipment and storage medium |
| CN113064593B (en) * | 2021-04-12 | 2022-04-12 | 深圳市活力天汇科技股份有限公司 | Method and device for dynamic mobile APP, computer equipment and storage medium |
| CN114048405A (en) * | 2021-10-26 | 2022-02-15 | 盐城金堤科技有限公司 | Method, device and equipment for generating entry template file and storage medium |
| CN114048405B (en) * | 2021-10-26 | 2024-04-09 | 盐城天眼察微科技有限公司 | Inlet template file generation method, device, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3433732B1 (en) | Converting visual diagrams into code | |
| WO2019233293A1 (en) | Method and apparatus for developing application program | |
| CN111857709A (en) | Mapping method and device for React component and Flutter component, electronic equipment and storage medium | |
| CN108595171B (en) | Object model generation method, device, equipment and storage medium | |
| CN111241454A (en) | Method, system and device for generating webpage code | |
| CN110727429B (en) | Front-end page generation method, device and equipment | |
| CN109062572B (en) | Component calling method, device, equipment and storage medium | |
| CN111427583A (en) | Component compiling method and device, electronic equipment and computer readable storage medium | |
| CN104049974A (en) | Dynamic control assembly method and system | |
| CN111611441B (en) | Heterogeneous data processing method and device and computer equipment | |
| CN112083919A (en) | YAML template-based target service code generation method and device | |
| CN103136100A (en) | Method and system for Android test | |
| CN110362792B (en) | Method and device for converting RN file into applet file and conversion equipment | |
| CN106776779B (en) | Method for generating entity file by JSON data based on Mac platform | |
| CN108664546B (en) | XML data structure conversion method and device | |
| CN106919374B (en) | Script generation method and device | |
| CN113778897A (en) | Automatic test method, device, equipment and storage medium of interface | |
| CN111078529B (en) | Client writing module testing method and device and electronic equipment | |
| CN109240679A (en) | The graphic method and device of script file | |
| CN110554857A (en) | JavaBean generation method, device and system and readable storage medium | |
| CN111158665B (en) | Code generation method and device, electronic equipment and storage medium | |
| CN115543324B (en) | Method, device, equipment and medium for generating interactive interface | |
| CN111309332A (en) | File content on-demand loading method and device, electronic equipment and storage medium | |
| CN113641594B (en) | Cross-terminal automatic testing method and related device | |
| CN115544973A (en) | Document generation method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WW01 | Invention patent application withdrawn after publication | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20201030 |