A control method and system for a suspension layer component based on RN

Abstract

The present invention relates to the field of graphical interface technology, and specifically to a control method and system for a floating layer component implemented based on RN. The method includes: obtaining information of the current window; if the current window contains the requirement for a floating layer, generating a mask layer at the top layer; detecting whether the basic controls meet the business requirements; if the basic controls meet the business requirements, embedding more than one basic controls on the mask layer; if the basic controls do not meet the business requirements, embedding a custom view on the mask layer; when a hide command is received, playing an exit animation and hiding the mask layer; when an expand command is received, playing an entry animation and expanding the mask layer. The control method and system have the advantages of complete functions and accurate interface display, solve the problems of simple functions and easy display failures of existing floating layer components, and meet the display needs of graphical interfaces.

Description

Technical Field

[0001] The present invention relates to the field of graphical interface technology, and in particular to a control method and system for a floating layer component based on RN. Background Art

[0002] The floating layer is a component that is often needed in the software development process. It is used to display other information on the upper layer of the current interface. At present, React Native (RN for short) is usually used to implement the floating layer function. RN is an open source cross-platform mobile application development framework derived from the open source JS framework React. RN supports iOS and Android platforms, uses Javascript language, similar to HTML's JSX, and cooperates with CSS to develop mobile applications, reducing the learning cost of technical personnel.

[0003] Currently, the floating layer component provided by RN is Modal component, which has many shortcomings. On the one hand, its functions are relatively simple, and it is impossible to customize the color of the mask layer or the time of the interface animation. It can only control whether to display the animation, which is difficult to meet the needs of use. In addition, the current Modal component based on RN also has some logical problems. When the loading process is fast, the new control will block the control that displays the loading animation, resulting in the loading animation not being displayed. In addition, when the application is quickly awakened, it is easy to generate two masks, resulting in abnormal interface display of the device. Therefore, a new control method and system for floating layer components are needed to solve the above-mentioned shortcomings. Summary of the invention

[0004] In order to overcome the technical defects of the above-mentioned existing suspension layer components, such as simple functions and easy display failures, the present invention provides a control method and system for a suspension layer component based on RN with complete functions and accurate interface display.

[0005] In order to solve the above problems, the present invention is implemented according to the following technical solutions:

[0006] The present invention provides a method for controlling a suspension layer component based on RN, characterized in that the method comprises:

[0007] Get the information of the current window;

[0008] If the current window contains the requirement of floating layer, a mask layer will be generated at the top layer;

[0009] Check whether basic controls meet business requirements;

[0010] If the basic controls meet the business requirements, embed one or more basic controls on the mask layer;

[0011] If the basic controls do not meet the business requirements, embed a custom view on the mask layer;

[0012] When a hide command is received, the exit animation is played and the mask layer is hidden;

[0013] When an expand command is received, the animation is played and the mask layer is expanded.

[0014] The obtaining of the information of the current window specifically includes: obtaining the size of the current window, obtaining the activity state of the current window, and obtaining the business requirements of the current window.

[0015] The basic controls include a loading view control, a message prompt control, a dialog control, a multi-state control, and a fade-in and fade-out control.

[0016] If the basic control does not meet the business requirements, a custom view is embedded in the mask layer. Specifically, if the basic control does not meet the business requirements, a custom view is generated, the size of the custom view is calculated, and then the coordinates of the custom view are obtained to draw the custom view.

[0017] The hidden commands include in-app messages, gesture actions, and return key commands.

[0018] The expansion command includes in-application messages, gesture actions, and menu key commands.

[0019] The gesture actions include a click gesture, a long press gesture, a slide gesture and a double-click gesture.

[0020] A system of a suspension layer component implemented based on RN, characterized in that the system comprises:

[0021] Information module, used to obtain information about the current window;

[0022] Initialization module, used to generate a mask layer at the top layer when the current window contains a floating layer requirement;

[0023] Detection module, used to detect whether basic controls meet business requirements;

[0024] The basic module is used to embed one or more basic controls on the mask layer when the basic controls meet the business requirements;

[0025] Custom modules are used to embed custom views on mask layers when basic controls do not meet business requirements;

[0026] The hiding module is used to play the exit animation and hide the mask layer when receiving the hiding command;

[0027] The expansion module is used to play the entry animation and expand the mask layer when receiving the expansion command.

[0028] Compared with the prior art, the present invention has the following beneficial effects:

[0029] The control method and system of a floating layer component based on RN described in the present invention have the advantages of complete functions and accurate interface display. By generating a mask layer, basic controls and custom views on the window, it can provide the functions of loading view controls, message prompt controls, dialog controls, multi-state controls, and fade-in and fade-out controls, and it is convenient to customize the color of the floating layer and the time of the interface animation, and the functions are relatively complete; in addition, the control method can avoid multiple wake-ups and display overlays by obtaining window information and controlling the hiding and unfolding of the floating layer, ensuring the correct display of content, solving the problems of simple functions and easy display failures of existing floating layer components, and meeting the display needs of the graphical interface. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] The specific embodiments of the present invention are further described in detail below in conjunction with the accompanying drawings, wherein:

[0031] Figure 1 It is a schematic flow chart of the method of the present invention;

[0032] Figure 2 It is a schematic diagram of the system structure of the present invention. DETAILED DESCRIPTION

[0033] The preferred embodiments of the present invention are described below in conjunction with the accompanying drawings. It should be understood that the preferred embodiments described herein are only used to illustrate and explain the present invention, and are not used to limit the present invention.

[0034] like Figure 1-2 As shown, the present invention provides a method for controlling a suspension layer component based on RN, the method comprising:

[0035] 101. Get the information of the current window;

[0036] The obtaining of the information of the current window is specifically as follows: obtaining the size of the current window so as to dynamically change the size of the floating layer according to the size of the current window to achieve an adaptive effect; obtaining the activity state of the current window for generating a task queue when the window is active to avoid the simultaneous appearance of multiple floating layers during repeated wake-ups; obtaining the business requirements of the current window for retrieving the contained business information through the window ID.

[0037] 102. If the current window contains the requirement of a floating layer, a mask layer is generated at the top layer;

[0038] Specifically, the mask layer has transparency and color information, which can be easily adjusted according to development needs.

[0039] 103. Check whether basic controls meet business requirements;

[0040] Specifically, the functions required by the business needs are compared with the basic controls. If the business needs contain functions that cannot be implemented by the basic controls, the basic controls cannot meet the needs.

[0041] 104. If the basic control meets the business requirements, embed one or more basic controls on the mask layer;

[0042] The basic controls include loading view controls: used to display animation and information during the loading process, message prompt controls: used to generate message boxes to display notification information, dialog controls: used to provide interactive dialogs, multi-state controls: used to switch the layout of multiple pages, and fade-in and fade-out controls: used to provide fade-in animation and fade-out animation. Basic controls can be used alone or in combination.

[0043] 105. If the basic controls do not meet the business requirements, embed a custom view on the mask layer;

[0044] If the basic control does not meet the business requirements, a custom view is embedded on the mask layer. Specifically, if the basic control does not meet the business requirements, a custom view is generated, and the Android measurement command onMeasure() is called to calculate the size of the custom view through the size of the current window. Then, the Android layout command onLayout() is called to obtain the coordinates of the custom view, and finally, the Android drawing command onDraw() is called to draw the custom view.

[0045] 106. When a hide command is received, an exit animation is played and the mask layer is hidden;

[0046] The hidden commands include in-application messages, gesture actions, and return key commands. Furthermore, the gesture actions include click gestures, long press gestures, sliding gestures, and double-click gestures. More than one in-application message, gesture action, or return key command is used as trigger information. When the user triggers the set trigger information during the operation, a hidden command is initiated to the floating layer. When the floating layer is already in a hidden state, no response is given.

[0047] 107. When an expand command is received, the animation is played and the mask layer is expanded.

[0048] The expansion command includes in-application messages, gesture actions and menu key commands. Furthermore, the gesture actions include click gestures, long press gestures, sliding gestures and double-click gestures. More than one in-application message, gesture action or return key command is used as trigger information. When the user triggers the set trigger information during the operation, an expansion command is initiated to the floating layer. When the floating layer is already in the expanded state, no response is given.

[0049] A system of a suspension layer component based on RN, the system comprising:

[0050] Information module 1, used to obtain information of the current window;

[0051] Initialization module 2 is used to generate a mask layer at the top layer when the current window contains a floating layer requirement;

[0052] Detection module 3, used to detect whether the basic controls meet business requirements;

[0053] Basic module 4, used to embed more than one basic control on the mask layer when the basic control meets the business requirements;

[0054] Custom module 5, used to embed a custom view on the mask layer when the basic controls do not meet the business requirements;

[0055] Hiding module 6, used for playing an exit animation and hiding the mask layer when receiving a hiding command;

[0056] The expansion module 7 is used to play the entry animation and expand the mask layer when receiving the expansion command.

[0057] The control method and system of the floating layer component implemented based on RN have the advantages of complete functions and accurate interface display. By generating a mask layer, basic controls and custom views on the window, it can provide the functions of loading view controls, message prompt controls, dialog controls, multi-state controls, and fade-in and fade-out controls, and it is convenient to customize the color of the floating layer and the time of the interface animation, and the functions are relatively complete. In addition, the control method can avoid display superposition caused by multiple wake-ups by obtaining window information and controlling the hiding and unfolding of the floating layer, ensuring the correct display of content, solving the problems of simple functions and easy display failures of existing floating layer components, and meeting the display needs of the graphical interface.

[0058] The above description is only a preferred embodiment of the present invention and does not limit the present invention in any form. Therefore, any modification, equivalent change and modification made to the above embodiment according to the technical essence of the present invention without departing from the technical solution of the present invention shall still fall within the scope of the technical solution of the present invention.

Claims

1. A control method for a suspension layer component based on RN, characterized in that: The method includes: Get the information of the current window; If the current window contains the requirement of floating layer, a mask layer will be generated at the top layer; Detect whether basic controls meet business requirements, the basic controls include loading view controls, message prompt controls, dialog controls, multi-state controls, and fade-in and fade-out controls; If the basic controls meet the business requirements, embed one or more basic controls on the mask layer; If the basic control does not meet the business requirements, a custom view is embedded on the mask layer. Specifically, if the basic control does not meet the business requirements, a custom view is generated, the size of the custom view is calculated, and then the coordinates of the custom view are obtained to draw the custom view; When a hide command is received, the exit animation is played and the mask layer is hidden; When an expand command is received, the animation is played and the mask layer is expanded.

2. A method for controlling a suspension layer component based on RN according to claim 1, characterized in that: The obtaining of the information of the current window specifically includes: obtaining the size of the current window, obtaining the activity state of the current window, and obtaining the business requirements of the current window.

3. According to a control method of a suspension layer component based on RN implementation according to claim 1, it is characterized in that: The hidden commands include in-app messages, gesture actions, and return key commands.

4. The control method of the suspension layer component based on RN according to claim 1 is characterized in that: The expansion command includes in-application messages, gesture actions, and menu key commands.

5. The control method of the suspension layer component based on RN according to claim 3 is characterized in that: The gesture actions include a click gesture, a long press gesture, a slide gesture and a double-click gesture.

6. A system of suspension layer components based on RN, characterized in that: The system includes: Information module, used to obtain information about the current window; Initialization module, used to generate a mask layer at the top layer when the current window contains a floating layer requirement; A detection module, used to detect whether basic controls meet business requirements, wherein the basic controls include loading view controls, message prompt controls, dialog controls, multi-state controls, and fade-in and fade-out controls; The basic module is used to embed one or more basic controls on the mask layer when the basic controls meet the business requirements; The custom module is used to embed a custom view on the mask layer when the basic control does not meet the business requirements. Specifically, if the basic control does not meet the business requirements, a custom view is generated, the size of the custom view is calculated, and then the coordinates of the custom view are obtained to draw the custom view; The hiding module is used to play the exit animation and hide the mask layer when receiving the hiding command; The expansion module is used to play the entry animation and expand the mask layer when receiving the expansion command.

Images