Picture loading method and device based on native module of mobile terminal, medium and equipment

Abstract

The invention relates to the technical field of financial science and technology and computers, and discloses a picture loading method and device based on a native module of a mobile terminal, a medium and equipment, and the method comprises the following steps: creating the native module based on a native function of the mobile terminal, and accessing the native module into a React Native application of mobile equipment; when the React Native application receives a picture loading request, calling the native module through the React Native application to obtain a picture resource corresponding to the picture loading request, and returning the picture resource to a framework layer of the React Native application; a frame layer of the React Native application creates a picture view corresponding to the picture resource, and calls the native module to create a native view corresponding to the picture view; and based on the native module, loading a picture resource into the native view for picture rendering, and returning a picture rendering ending event to a frame layer of the React Native application when picture rendering is completed so as to realize picture display. And the picture loading and rendering efficiency is improved.

Description

Technical Field

[0001] The present application relates to the fields of computer and financial technology, and in particular to a method, device, medium and equipment for loading images based on a native module of a mobile terminal. Background Art

[0002] As an open source cross-platform mobile development solution, React Native client framework is widely compatible with iOS and Android operating systems and has great potential in the development of applications in the field of financial technology. In the interface of financial technology applications, displaying image elements is a basic and crucial function. The usual practice is to rely on the built-in image controls of the framework. These controls can update the image by changing the source of the image control when the page is re-rendered, relying on the framework's own refresh mechanism. For a group of images that need to be dynamically updated, developers can set a loop timer to refresh them regularly to meet real-time requirements.

[0003] However, when faced with high-resolution image materials or high-frame-rate dynamic images (such as real-time chart animations in financial data visualization), the traditional method of directly loading them using the frame layer's image controls may expose performance bottlenecks. In this case, the image rendering speed may drop significantly, and the playback of dynamic images may even experience frame drops, seriously affecting the user experience and the accuracy of data presentation.

[0004] Therefore, in the field of financial technology, which has extremely high requirements for accuracy and real-time performance, exploring more efficient and smoother solutions for displaying pictures and dynamic images has become the key to improving application performance and user experience. Summary of the invention

[0005] In view of this, the embodiments of the present application provide a method, apparatus, medium and device for loading images based on a native module of a mobile terminal, which improves the efficiency of image loading and rendering through the close integration of the native module with the React Native framework.

[0006] According to one aspect of the present application, a method for loading an image based on a native module of a mobile terminal is provided, which is applied to a mobile device based on a React Native application, and the method includes:

[0007] Create a native module based on the native functions of the mobile terminal, and integrate the native module into the React Native application of the mobile device;

[0008] When the React Native application receives the image loading request, the React Native application calls the native module to obtain the image resource corresponding to the image loading request, and transmits the image resource back to the framework layer of the React Native application;

[0009] The framework layer of the React Native application creates an image view corresponding to the image resource, and calls the native module to create a native view corresponding to the image view;

[0010] Based on the native module, the image resource is loaded into the native view for image rendering, and when the image rendering is completed, an image rendering completion event is returned to the framework layer of the React Native application to realize image display.

[0011] In the embodiment of the present application, optionally, after calling the native module to create the native view corresponding to the picture view, the method further includes:

[0012] Adding the native view to the UI management control of the React Native application;

[0013] After receiving the image rendering end event, the framework layer of the React Native application manages the life cycle of the native view based on the UI management control.

[0014] In the embodiment of the present application, optionally, the calling the native module through the React Native application to obtain the image resource corresponding to the image loading request, and returning the image resource to the framework layer of the React Native application includes:

[0015] The React Native application calls the native module through a predefined application program interface to query whether the image resource corresponding to the image loading request already exists locally;

[0016] If it does not exist locally, the image resource corresponding to the image loading request is downloaded to the cache through the native module, and the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0017] If it already exists locally, the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0018] Accordingly, the framework layer of the React Native application creates an image view corresponding to the image resource, including:

[0019] The framework layer of the React Native application creates an image view corresponding to the path information of the image resource.

[0020] In the embodiment of the present application, optionally, if the image resource already exists locally, returning the path information of the image resource to the framework layer of the React Native application includes:

[0021] If the image resource is downloaded to the cache, the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0022] If the image resource is saved in the disk, the image resource in the disk is loaded into the kernel buffer of the operating system and copied from the kernel buffer to the user space, the image resource in the user space is assigned to the native module, and the native module returns the path information of the image resource to the framework layer of the React Native application.

[0023] In the embodiment of the present application, optionally, loading the image resource into the native view for image rendering based on the native module includes:

[0024] Identify whether the image corresponding to the native view belongs to a preset repeated display type;

[0025] If it belongs to the preset repeated display type, the image resource is directly decoded based on the native module to obtain bitmap data and stored in the cache, and when the image rendering instruction sent by the React Native application is received, the bitmap data in the cache is loaded into the native view for image rendering;

[0026] If it does not belong to the preset repeated display type, upon receiving the image rendering instruction sent by the React Native application, the image resource is decoded into bitmap data based on the native module, the bitmap data is loaded into the native view for image rendering, and the bitmap data is deleted when the image rendering is completed.

[0027] In the embodiment of the present application, optionally, if it belongs to the preset repeated display type, after the image resource is directly decoded based on the native module to obtain bitmap data and stored in the cache, the method further includes:

[0028] When the remaining capacity of the cache is lower than a preset capacity threshold, the image resources and bitmap data in the cache are released according to a preset cache release rule.

[0029] In the embodiment of the present application, optionally, when the image rendering is completed, transmitting the image rendering completion event back to the framework layer of the React Native application includes:

[0030] If the mobile device is an Android system, a timer monitoring control is enabled to monitor the rendering process of the native view, and when the native view rendering is completed, a picture rendering completion event is transmitted back to the framework layer of the React Native application;

[0031] If the mobile device is an IOS system, the KVO control is started to monitor the rendering process of the native view, and when the native view rendering is completed, the image rendering completion event is returned to the framework layer of the React Native application.

[0032] According to another aspect of the present application, a picture loading device based on a mobile terminal native module is provided, which is applied to a mobile device based on a React Native application, and the device includes:

[0033] An access module, used to create a native module based on the native function of the mobile terminal, and access the native module in the React Native application of the mobile device;

[0034] A resource acquisition module, configured to, when the React Native application receives a picture loading request, call the native module through the React Native application to acquire a picture resource corresponding to the picture loading request, and transmit the picture resource back to the framework layer of the React Native application;

[0035] A view creation module, used for the framework layer of the React Native application to create a picture view corresponding to the picture resource, and to call the native module to create a native view corresponding to the picture view;

[0036] The loading module is used to load the image resource into the native view for image rendering based on the native module, and transmit the image rendering completion event back to the framework layer of the React Native application when the image rendering is completed to realize image display.

[0037] In the embodiment of the present application, optionally, the view creation module is further configured to call the native module to create a native view corresponding to the image view, and then add the native view to the UI management control of the React Native application;

[0038] The loading module is also used to manage the life cycle of the native view based on the UI management control after the framework layer of the React Native application receives the image rendering end event.

[0039] In the embodiment of the present application, optionally, the resource acquisition module is further used to:

[0040] The React Native application calls the native module through a predefined application program interface to query whether the image resource corresponding to the image loading request already exists locally;

[0041] If it does not exist locally, the image resource corresponding to the image loading request is downloaded to the cache through the native module, and the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0042] If it already exists locally, the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0043] Correspondingly, the view creation module is used for: the framework layer of the React Native application to create a picture view corresponding to the path information of the picture resource.

[0044] In the embodiment of the present application, optionally, the resource acquisition module is further used to:

[0045] If the image resource is downloaded to the cache, the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0046] If the image resource is saved in the disk, the image resource in the disk is loaded into the kernel buffer of the operating system and copied from the kernel buffer to the user space, the image resource in the user space is assigned to the native module, and the native module returns the path information of the image resource to the framework layer of the React Native application.

[0047] In the embodiment of the present application, optionally, the loading module is further used to:

[0048] Identify whether the image corresponding to the native view belongs to a preset repeated display type;

[0049] If it belongs to the preset repeated display type, the image resource is directly decoded based on the native module to obtain bitmap data and stored in the cache, and when the image rendering instruction sent by the React Native application is received, the bitmap data in the cache is loaded into the native view for image rendering;

[0050] If it does not belong to the preset repeated display type, upon receiving the image rendering instruction sent by the React Native application, the image resource is decoded into bitmap data based on the native module, the bitmap data is loaded into the native view for image rendering, and the bitmap data is deleted when the image rendering is completed.

[0051] In the embodiment of the present application, optionally, the loading module is further used to:

[0052] If it belongs to the preset repeated display type, the image resources are directly decoded based on the native module to obtain the bitmap data and stored in the cache. When the remaining capacity of the cache is lower than the preset capacity threshold, the image resources and bitmap data in the cache are released according to the preset cache release rules.

[0053] In the embodiment of the present application, optionally, the loading module is further used to:

[0054] If the mobile device is an Android system, a timer monitoring control is enabled to monitor the rendering process of the native view, and when the native view rendering is completed, a picture rendering completion event is transmitted back to the framework layer of the React Native application;

[0055] If the mobile device is an IOS system, the KVO control is started to monitor the rendering process of the native view, and when the native view rendering is completed, the image rendering completion event is returned to the framework layer of the React Native application.

[0056] According to another aspect of the present application, a storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the above-mentioned image loading method based on the native module of the mobile terminal is implemented.

[0057] According to another aspect of the present application, a computer device is provided, including a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, wherein the processor implements the above-mentioned image loading method based on the native module of the mobile terminal when executing the program.

[0058] By means of the above technical solution, the embodiment of the present application provides a method, device, medium and equipment for loading images based on a native module of a mobile terminal. In a mobile terminal based on React Native, the image loading is efficiently and securely processed by creating and accessing a native module. When the application receives a request to load an image, the native module is used to obtain the image resources, and the corresponding image view and native view are created in the React Native framework layer. The native module is responsible for loading the image resources into the native view for rendering, and notifying the React Native framework layer after the rendering is completed to achieve safe and fast display of the image. The embodiment of the present application improves the efficiency of image loading and rendering through the close integration of the native module and the React Native framework. The native module can make full use of the hardware acceleration capabilities of the mobile device to achieve efficient rendering, reduce processing time, and improve transaction efficiency. These optimizations not only improve the user experience, but also enhance the competitiveness and market adaptability of financial technology applications.

[0059] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0060] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0061] Figure 1 A schematic diagram of a process of a method for loading an image based on a native module of a mobile terminal provided in an embodiment of the present application is shown;

[0062] Figure 2 A schematic diagram of a process of another method for loading an image based on a native module of a mobile terminal provided in an embodiment of the present application is shown;

[0063] Figure 3 A schematic diagram of a process of another method for loading an image based on a native module of a mobile terminal provided in an embodiment of the present application is shown;

[0064] Figure 4 A schematic diagram of a process of another method for loading an image based on a native module of a mobile terminal provided in an embodiment of the present application is shown;

[0065] Figure 5 A structural schematic diagram of a picture loading device based on a native module of a mobile terminal provided in an embodiment of the present application is shown. DETAILED DESCRIPTION

[0066] The present application will be described in detail below with reference to the accompanying drawings and in combination with embodiments. It should be noted that the embodiments and features in the embodiments of the present application can be combined with each other without conflict.

[0067] In this embodiment, a method for loading an image based on a native module of a mobile terminal is provided, which is applied to a mobile device based on a React Native application, such as Figure 1 As shown, the method includes:

[0068] Step 101: Create a native module based on the native function of the mobile terminal, and connect the native module to the React Native application of the mobile device.

[0069] In the embodiment of the present application, in the financial technology application, the native module can encapsulate the security functions related to image loading, such as encrypting the storage and transmission of image data, and ensuring the security of user sensitive information (such as ID card photos, bank card photos, etc.). In addition, the native module can also optimize the image processing algorithm to meet the high requirements for image quality and clarity in financial technology. Although the React Native framework allows most of the application logic to be written in JavaScript (framework layer), for some high-performance requirements or specific platform functions (such as file system access, camera access, complex animation, etc.), it is more efficient to directly use native code (such as iOS's Swift / Objective-C, Android's Java / Kotlin). Therefore, it is first necessary to create native modules on the iOS or Android platform according to the needs. These modules encapsulate the native functions related to image loading, such as reading pictures from the file system, downloading pictures from the network, etc. After the creation is completed, these native modules are connected to the React Native application through the bridging mechanism of React Native, so that JavaScript code can call these native functions.

[0070] Step 102: When the React Native application receives a picture loading request, the React Native application calls the native module to obtain a picture resource corresponding to the picture loading request, and transmits the picture resource back to the framework layer of the React Native application.

[0071] In the embodiment of the present application, in the field of financial technology, the image loading request may come from the ID card, bank card photo uploaded by the user, or the transaction voucher obtained from the server. When the native module obtains these image resources, it is necessary to ensure the security of data transmission, such as using the HTTPS protocol, and encrypt the image data. At the same time, the native module can also pre-process the image, such as cropping, compression, etc., to reduce the amount of data transmission and increase the loading speed. In the React Native application, when the user triggers the image loading (such as clicking a button to display the image, or triggering the display operation of a page, the image on this page can be loaded), the JavaScript code of React Native will capture this event and request the image resource through the native module interface previously connected. The native module obtains the image resource according to the request (which may be a URL, file path, etc.), and then passes the image resource (which may be image data, file path, etc.) back to the JavaScript layer of ReactNative through the bridging mechanism.

[0072] Step 103: The framework layer of the React Native application creates an image view corresponding to the image resource, and calls the native module to create a native view corresponding to the image view.

[0073] In the embodiment of the present application, after the JavaScript layer of React Native receives the image resource, it will create a virtual DOM node (i.e., image view) representing the image. Then, the framework layer of React Native will call the native module to request the creation of a real view (i.e., native view) corresponding to this virtual DOM node at the native level to ensure that the image can be rendered on the screen in the most efficient way.

[0074] Step 104: Based on the native module, the image resource is loaded into the native view for image rendering, and when the image rendering is completed, an image rendering completion event is transmitted back to the framework layer of the React Native application to realize image display.

[0075] In an embodiment of the present application, during the image rendering process, the fintech application needs to ensure the efficiency and accuracy of the rendering. At the native level, the native module loads the image resources into the native view created previously. Since this step is performed at the native level, the hardware acceleration and graphics processing capabilities of the mobile device can be fully utilized to achieve efficient rendering. When the image rendering is completed, the native module will send an event to the JavaScript layer of React Native through the bridging mechanism to notify that the image has been rendered. After receiving this event, the framework layer of React Native will update the UI so that the user can see the loaded image.

[0076] By applying the technical solution of this embodiment, in a mobile terminal based on React Native, image loading is efficiently and securely processed by creating and accessing a native module. When the application receives a request to load an image, the native module is used to obtain the image resource, and the corresponding image view and native view are created in the React Native framework layer. The native module is responsible for loading the image resource into the native view for rendering, and notifying the React Native framework layer after the rendering is completed to achieve safe and fast display of the image. The embodiment of the present application improves the efficiency of image loading and rendering through the close integration of the native module and the React Native framework. The native module can make full use of the hardware acceleration capabilities of the mobile device to achieve efficient rendering, reduce processing time, and improve transaction efficiency. These optimizations not only improve the user experience, but also enhance the competitiveness and market adaptability of financial technology applications.

[0077] Further, as a refinement and extension of the specific implementation of the above embodiment, in order to fully illustrate the specific implementation process of this embodiment, another image loading method based on the native module of the mobile terminal is provided, such as Figure 2 As shown, the method includes:

[0078] Step 201: Create a native module based on the native function of the mobile terminal, and access the native module in the React Native application of the mobile device.

[0079] In this embodiment, this step involves creating native modules in the native development environment of the mobile device (such as Objective-C / Swift for iOS or Java / Kotlin for Android). These modules encapsulate the underlying functions related to image loading and processing, such as file system access, network requests, image decoding, etc. These native modules are then connected to the React Native application through the React Native bridge mechanism, so that JavaScript code can call these native functions.

[0080] Step 202: When the React Native application receives a request to load an image, the React Native application calls the native module through a predefined application program interface to query whether an image resource corresponding to the image loading request already exists locally.

[0081] In this embodiment, when a user triggers a request to load an image (such as clicking an image link), the React Native application captures this event and calls the native module through a predefined application program interface (API). The native module then checks whether the requested image resource exists in the local cache (such as a disk cache or a memory cache), thereby reducing unnecessary network requests and improving loading speed.

[0082] Step 203: If the image resource does not exist locally, the image resource corresponding to the image loading request is downloaded to the cache through the native module, and the path information of the image resource is returned to the framework layer of the React Native application.

[0083] In this embodiment, if the requested image resource does not exist in the local cache, the native module will be responsible for downloading the image resource from the network. After the download is completed, the image resource is saved to the local cache for subsequent quick access. At the same time, the native module returns the path information (or reference) of the image resource to the framework layer of the React Native application. In this way, the React Native application can use this path information to create an image view.

[0084] Step 204: If the image resource already exists locally, the path information of the image resource is transmitted back to the framework layer of the ReactNative application.

[0085] In this embodiment, if the requested image resource exists in the local cache, the native module will directly return the path information of the image resource to the framework layer of the React Native application. In this way, the React Native application can avoid unnecessary network requests and directly use the image resources in the local cache to create and display the image view.

[0086] In an embodiment of the present application, optionally, step 204 includes: if the image resource is downloaded to the cache, the path information of the image resource is transmitted back to the framework layer of the React Native application; if the image resource is saved in the disk, the image resource in the disk is loaded into the kernel buffer of the operating system, and copied from the kernel buffer to the user space, the image resource in the user space is assigned to the native module, and the native module transmits the path information of the image resource back to the framework layer of the React Native application.

[0087] In the above embodiment, when the image resource is requested for the first time and is not in the local cache, it is downloaded and stored in the cache. If the image resource is downloaded and stored in the memory cache (for example, as a temporary, fast-access storage area), the native module can directly obtain the memory address or reference of the image resource. The native module passes this memory address or reference (as a form of path information of the image resource) back to the framework layer of the React Native application. If the image resource is stored on the disk due to size or access frequency, then when it needs to be accessed again, it needs to be loaded from the disk into the memory cache. The loading process is usually to read the image resource from the disk to the kernel buffer of the operating system. Then, the image resource is copied from the kernel buffer to the user space, which is a memory area accessible to the application. In the user space, the image resource is assigned to the native module, and the native module then passes the image resource in the user space (or its reference / path information) back to the framework layer of the React Native application. In the embodiment of the present application, by distinguishing between memory cache and disk cache, the cache resources can be flexibly managed according to the frequency and size of the image. The memory cache provides fast access, while the disk cache is used to store larger or less used images. When loading image resources from disk to user space, the kernel buffer can be used to reduce the direct occupation of system memory and improve the efficiency of memory use. For image resources stored in the memory cache, their memory addresses can be directly accessed without additional disk I / O operations, thereby increasing the loading speed. By properly managing memory and disk cache, application crashes or performance degradation caused by insufficient memory can be avoided.

[0088] Step 205: The framework layer of the React Native application creates an image view corresponding to the path information of the image resource, calls the native module to create a native view corresponding to the image view, and adds the native view to the UI management control of the React Native application.

[0089] In this embodiment, the framework layer (JavaScript layer) of the React Native application creates a corresponding image view (Image View) object according to the path information of the image resource. Through the bridging mechanism of React Native, the native module (including Objective-C / Swift of iOS or Java / Kotlin code of Android) is called to create a native view corresponding to the image view. After the native view is created, this native view is added to the UI management control of the React Native application so that the life cycle of the native view can be managed through the UI management control.

[0090] Step 206: Identify whether the image corresponding to the native view belongs to a preset repeated display type.

[0091] In this embodiment, it is determined whether the image corresponding to the native view belongs to a preset repeated display type, for example, based on the path, name or other identifier of the image, to identify whether it matches the path, name, or other identifier of a pre-stored preset repeated display type image.

[0092] Step 207: If it belongs to the preset repeated display type, the image resource is directly decoded based on the native module to obtain bitmap data and stored in the cache, and when the image rendering instruction sent by the React Native application is received, the bitmap data in the cache is loaded into the native view for image rendering.

[0093] In this embodiment, if the image is of the repeated display type, the image resource is directly decoded by the native module to obtain bitmap data, and the data is stored in the cache. When the React Native application sends an image rendering instruction, the bitmap data is loaded from the cache and loaded into the native view for rendering.

[0094] Further, optionally, when the remaining capacity of the cache is lower than a preset capacity threshold, the image resources and bitmap data in the cache are released according to a preset cache release rule. When the remaining capacity of the cache is lower than a preset capacity threshold, the image resources and bitmap data in the cache are released according to a preset cache release rule (such as an LRU algorithm) to free up space.

[0095] Step 208: If it does not belong to the preset repeated display type, upon receiving the image rendering instruction sent by the React Native application, the image resource is decoded into bitmap data based on the native module, the bitmap data is loaded into the native view for image rendering, and the bitmap data is deleted when the image rendering is completed.

[0096] In this embodiment, if the image does not belong to the repeated display type, then when the image rendering instruction sent by the React Native application is received, the image resource is decoded into bitmap data through the native module, the decoded bitmap data is loaded into the native view for rendering, and the bitmap data is deleted after the image rendering is completed to avoid unnecessary memory usage.

[0097] Step 209: When the image rendering is completed, the image rendering completion event is transmitted back to the framework layer of the React Native application, and the life cycle of the native view is managed based on the UI management control.

[0098] In this embodiment, when the image rendering in the native view is completed, the image rendering completion event is passed back to the framework layer of the React Native application through the bridging mechanism of React Native, so that the React Native application can update the UI state, trigger subsequent logic or provide user feedback accordingly. After the framework layer of the React Native application receives the image rendering completion event, it will use the UI management control (which may be the virtual DOM system of React Native or other UI management tools) to manage the life cycle of the native view, including but not limited to: monitoring the loading, display, hiding, and unloading events of the native view to ensure the rational use of resources and the timely release of memory. In particular, when the native view no longer needs to be displayed (such as when the user navigates to other pages or components), the React Native application should ensure that the native view is unloaded in time and the resources related to it are released to avoid memory leaks. In this embodiment of the application, by timely passing back the image rendering completion event, the React Native application can provide users with a smoother interactive experience, such as displaying a loading completion prompt, updating a progress bar, etc. Through reasonable life cycle management, the React Native application can better handle user operations and system events, and reduce crashes and accidents.

[0099] In an embodiment of the present application, optionally, the step 209 of returning the image rendering end event to the framework layer of the React Native application when the image rendering is completed includes: if the mobile device is an Android system, enabling a timer listening control to listen to the rendering process of the native view, and returning the image rendering end event to the framework layer of the React Native application when the native view rendering ends; if the mobile device is an IOS system, starting a KVO control to listen to the rendering process of the native view, and returning the image rendering end event to the framework layer of the React Native application when the native view rendering ends.

[0100] In the above embodiment, when the image rendering is completed, the image rendering completion event is returned to the framework layer of the React Native application. For Android system: Enable timer monitoring control: On the Android system, due to the asynchrony and uncertainty of native view rendering, a timer (such as Handler, ScheduledExecutorService, etc.) can be used to monitor the rendering process of the native view. The timer periodically checks the state of the native view to determine whether the rendering is completed, which can be achieved by checking certain properties of the native view (such as whether it is visible, whether it has been drawn, etc.). When it is determined that the native view rendering is completed, the timer will trigger an event, which is returned to the framework layer of the React Native application through the bridging mechanism of React Native. For iOS system: On the iOS system, Key-Value Observing (KVO) can be used to monitor changes in native view properties. Through KVO, changes in native view properties related to rendering (such as frame, layer.contents, etc.) can be monitored to determine whether the rendering is completed. When KVO observes that changes in related properties indicate that rendering is complete, an event will be triggered and the event will be returned to the framework layer of the ReactNative application through the bridging mechanism of React Native. The embodiment of the present application provides two mechanisms, timer monitoring and KVO monitoring, for Android and iOS systems respectively, to ensure that the image rendering end event can be passed back to the framework layer of the React Native application across platforms. The timer and KVO provide a flexible way to monitor the rendering process of the native view, which can be adjusted and optimized according to specific application scenarios and requirements. By monitoring the rendering process of the native view, relevant resources can be released in time after the rendering is completed, avoiding unnecessary memory usage and performance loss. By ensuring that the image rendering end event can be reliably passed back, the robustness and stability of the React Native application are enhanced, and potential problems caused by incomplete rendering are reduced.

[0101] By applying the technical solution of this embodiment, native UI components are built based on the mobile terminal IOS operating system and Android operating system, and native, complex, multi-level high-definition image rendering can be realized in the ReactNative framework layer. Through efficient image resource management and rendering mechanism, the delay of image loading and rendering is reduced, the response speed and fluency of the application are improved, and the timely image rendering completion event is returned, so that the application can provide users with more timely feedback and interactive experience, such as displaying loading progress, updating UI status, etc. Intelligent cache management is performed on image resources, unnecessary repeated decoding and memory occupation are reduced, the efficiency of memory and CPU usage is improved, and when the cache capacity is insufficient, resources are reasonably released according to the preset cache release rules, avoiding memory leaks and performance degradation. Through fine native view life cycle management, the rational use and timely release of resources are ensured, and the occurrence of crashes and accidents is reduced. At the same time, the cross-platform monitoring mechanism ensures that the image rendering end event can be reliably returned, enhancing the compatibility and stability of the application. Through integrated processing flow and standardized interface design, the complexity of development and maintenance is reduced, the development efficiency and code quality are improved, and the platform solution avoids the need to write duplicate code for different operating systems and reduces the development workload. In summary, the entire solution provides a comprehensive and effective image processing solution for ReactNative applications by optimizing image resource management and rendering mechanisms, improving user experience, optimizing resource management, enhancing application robustness and stability, supporting flexible configuration and expansion, and reducing development and maintenance costs.

[0102] In a specific application scenario, such as Figure 3 As shown, first, when previewing images through the ReactNative client application, you first need to obtain the control technology support of the native module of the framework layer in the framework layer. Through the control technology support of the native module, you can customize the module or interface encapsulation. (The framework itself actually has a relatively complete module encapsulation, but sometimes mobile applications need to access modules or program interfaces that have not yet been encapsulated, or need to reuse the views, algorithms, high performance, and multi-threaded codes of the native operating system. It is impossible to re-implement them within the framework). Secondly, application interfaces for asynchronously obtaining image resources are provided on the framework layer and the operating system respectively. The operating system receives the asynchronous download resource package request of the framework layer and checks whether the resource package has been downloaded. If it has been downloaded, the resource package is directly returned to the framework layer; if it has not been downloaded, the operating system downloads the resource package to the cache through an asynchronous thread. The resource package downloaded to the cache is decompressed to the specified path, and the decompressed path information is returned to the framework layer. Then, as Figure 4As shown, the image view is obtained in the framework layer according to the application program interface for asynchronously obtaining image resources, and then a native view is created according to the obtained image view, and the native view is provided to the object responsible for managing the UI in the framework layer (the UI management control of the framework layer). With the support of the native module control technology of the framework layer, the native view is managed by the subview of the UI management control, and the properties of the native view are set and updated as needed, and the corresponding event is sent to the framework layer according to the delegation of the native view (after the Android operating system and the IOS operating system implement the rendering of the native view, the rendering completion information is returned to the framework layer). In the implementation of this solution, the resource image information includes: network address, image name in the framework, native local image path, etc. Further, when the image view in the operating system is a picture loaded from a disk path, the disk image is loaded into the kernel buffer of the operating system, and copied from the kernel buffer to the user space, and finally the disk image is assigned to the native image control. After the operating system captures the above operation processing, it starts to render the image. There are two main types of application program interfaces for loading pictures in the native image control. The main difference between the two types of interfaces is in the picture decoding stage. One type of interface will be decoded immediately after loading the original image. Both the original image and the decoded bitmap data will be saved in the system cache and will only be released when the memory is low to the set threshold; the other type of interface will be decoded before the original image is rendered, and the original image will not be cached. According to the implementation scenario, if the image needs to be reused many times, the former interface type is used; the disk image that is only used once uses the latter interface type. This can make reasonable and effective use of cache and disk space on the one hand, and avoid frequent redrawing of image views on the other hand, reducing the memory consumption of the application. Finally, the native image control is used in the mobile operating system to create an image collection, and then the image view is obtained from the framework layer based on the image collection. In the Android operating system, the timer listening control is used to monitor the rendering process of the view, and the information is returned to the framework layer when the image view rendering is completed; in the IOS operating system, the KVO control is used to monitor the rendering of the image view, and the information is returned to the framework layer when the image view rendering is completed. The client framework layer can display the high-definition view based on the native rendering of the operating system very smoothly.

[0103] Further, as Figure 1 The specific implementation of the method, the embodiment of the present application provides an image loading device based on a mobile terminal native module, which is applied to a mobile device based on a React Native application, such as Figure 5 As shown, the device comprises:

[0104] An access module, used to create a native module based on the native function of the mobile terminal, and access the native module in the React Native application of the mobile device;

[0105] A resource acquisition module, configured to, when the React Native application receives a picture loading request, call the native module through the React Native application to acquire a picture resource corresponding to the picture loading request, and transmit the picture resource back to the framework layer of the React Native application;

[0106] A view creation module, used for the framework layer of the React Native application to create a picture view corresponding to the picture resource, and to call the native module to create a native view corresponding to the picture view;

[0107] The loading module is used to load the image resource into the native view for image rendering based on the native module, and transmit the image rendering completion event back to the framework layer of the React Native application when the image rendering is completed to realize image display.

[0108] In the embodiment of the present application, optionally, the view creation module is further configured to call the native module to create a native view corresponding to the image view, and then add the native view to the UI management control of the React Native application;

[0109] The loading module is also used to manage the life cycle of the native view based on the UI management control after the framework layer of the React Native application receives the image rendering end event.

[0110] In the embodiment of the present application, optionally, the resource acquisition module is further used to:

[0111] The React Native application calls the native module through a predefined application program interface to query whether the image resource corresponding to the image loading request already exists locally;

[0112] If it does not exist locally, the image resource corresponding to the image loading request is downloaded to the cache through the native module, and the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0113] If it already exists locally, the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0114] Correspondingly, the view creation module is used for: the framework layer of the React Native application to create a picture view corresponding to the path information of the picture resource.

[0115] In the embodiment of the present application, optionally, the resource acquisition module is further used to:

[0116] If the image resource is downloaded to the cache, the path information of the image resource is transmitted back to the framework layer of the React Native application;

[0117] If the image resource is saved in the disk, the image resource in the disk is loaded into the kernel buffer of the operating system and copied from the kernel buffer to the user space, the image resource in the user space is assigned to the native module, and the native module returns the path information of the image resource to the framework layer of the React Native application.

[0118] In the embodiment of the present application, optionally, the loading module is further used to:

[0119] Identify whether the image corresponding to the native view belongs to a preset repeated display type;

[0120] If it belongs to the preset repeated display type, the image resource is directly decoded based on the native module to obtain bitmap data and stored in the cache, and when the image rendering instruction sent by the React Native application is received, the bitmap data in the cache is loaded into the native view for image rendering;

[0121] If it does not belong to the preset repeated display type, upon receiving the image rendering instruction sent by the React Native application, the image resource is decoded into bitmap data based on the native module, the bitmap data is loaded into the native view for image rendering, and the bitmap data is deleted when the image rendering is completed.

[0122] In the embodiment of the present application, optionally, the loading module is further used to:

[0123] If it belongs to the preset repeated display type, the image resources are directly decoded based on the native module to obtain the bitmap data and stored in the cache. When the remaining capacity of the cache is lower than the preset capacity threshold, the image resources and bitmap data in the cache are released according to the preset cache release rules.

[0124] In the embodiment of the present application, optionally, the loading module is further used to:

[0125] If the mobile device is an Android system, a timer monitoring control is enabled to monitor the rendering process of the native view, and when the native view rendering is completed, a picture rendering completion event is transmitted back to the framework layer of the React Native application;

[0126] If the mobile device is an IOS system, the KVO control is started to monitor the rendering process of the native view, and when the native view rendering is completed, the image rendering completion event is returned to the framework layer of the React Native application.

[0127] It should be noted that for other corresponding descriptions of the functional units involved in the image loading device based on the native module of the mobile terminal provided in the embodiment of the present application, please refer to Figure 1 to Figure 2 The corresponding description in the method will not be repeated here.

[0128] The embodiment of the present application also provides a computer device, which can be a personal computer, a server, a network device, etc. The computer device includes a bus, a processor, a memory and a communication interface, and can also include an input and output interface and a display device. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The database of the computer device is used to store location information. The network interface of the computer device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, the steps in each method embodiment are implemented.

[0129] Those skilled in the art will appreciate that the structure of the above-mentioned computer device is only a partial structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components, or combine certain components, or have a different arrangement of components.

[0130] In one embodiment, a computer-readable storage medium is provided. The computer-readable storage medium may be non-volatile or volatile, and stores a computer program thereon. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments are implemented.

[0131] In one embodiment, a computer program product is provided, including a computer program, which implements the steps in the above method embodiments when executed by a processor.

[0132] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties.

[0133] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to the memory, database or other medium used in the embodiments provided in the present application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetoresistive random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. As an illustration and not limitation, RAM can be in various forms, such as static random access memory (SRAM) or dynamic random access memory (DRAM). The database involved in each embodiment provided in this application may include at least one of a relational database and a non-relational database. Non-relational databases may include distributed databases based on blockchains, etc., but are not limited to this. The processor involved in each embodiment provided in this application may be a general-purpose processor, a graphics processor, a digital signal processor, a programmable logic device, a data processing logic device based on quantum computing, etc., but are not limited to this.

[0134] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0135] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A method for loading images based on a native module of a mobile terminal, characterized in that: Applied to a mobile device based on a React Native application, the method includes: Create a native module based on the native functions of the mobile terminal, and integrate the native module into the React Native application of the mobile device; When the React Native application receives the image loading request, the React Native application calls the native module to obtain the image resource corresponding to the image loading request, and transmits the image resource back to the framework layer of the React Native application; The framework layer of the React Native application creates an image view corresponding to the image resource, and calls the native module to create a native view corresponding to the image view; Based on the native module, the image resource is loaded into the native view for image rendering, and when the image rendering is completed, an image rendering completion event is returned to the framework layer of the React Native application to realize image display.

2. The method according to claim 1, characterized in that: After calling the native module to create the native view corresponding to the picture view, the method further includes: Adding the native view to the UI management control of the React Native application; After receiving the image rendering end event, the framework layer of the React Native application manages the life cycle of the native view based on the UI management control.

3. The method according to claim 1, characterized in that The calling the native module through the React Native application to obtain the image resource corresponding to the image loading request, and returning the image resource to the framework layer of the React Native application, includes: The React Native application calls the native module through a predefined application program interface to query whether the image resource corresponding to the image loading request already exists locally; If it does not exist locally, the image resource corresponding to the image loading request is downloaded to the cache through the native module, and the path information of the image resource is transmitted back to the framework layer of the React Native application; If it already exists locally, the path information of the image resource is transmitted back to the framework layer of the React Native application; Accordingly, the framework layer of the React Native application creates an image view corresponding to the image resource, including: The framework layer of the React Native application creates an image view corresponding to the path information of the image resource.

4. The method according to claim 3, characterized in that: If the image resource already exists locally, the path information of the image resource is transmitted back to the framework layer of the React Native application, including: If the image resource is downloaded to the cache, the path information of the image resource is transmitted back to the framework layer of the ReactNative application; If the image resource is saved in the disk, the image resource in the disk is loaded into the kernel buffer of the operating system and copied from the kernel buffer to the user space, the image resource in the user space is assigned to the native module, and the native module returns the path information of the image resource to the framework layer of the React Native application.

5. The method according to claim 1, characterized in that The step of loading the image resource into the native view for image rendering based on the native module includes: Identify whether the image corresponding to the native view belongs to a preset repeated display type; If it belongs to the preset repeated display type, the image resource is directly decoded based on the native module to obtain bitmap data and stored in the cache, and when the image rendering instruction sent by the React Native application is received, the bitmap data in the cache is loaded into the native view for image rendering; If it does not belong to the preset repeated display type, upon receiving the image rendering instruction sent by the React Native application, the image resource is decoded into bitmap data based on the native module, the bitmap data is loaded into the native view for image rendering, and the bitmap data is deleted when the image rendering is completed.

6. The method according to claim 5, characterized in that If it belongs to the preset repeated display type, the image resource is directly decoded based on the native module to obtain bitmap data and stored in the cache, and the method further includes: When the remaining capacity of the cache is lower than a preset capacity threshold, the image resources and bitmap data in the cache are released according to a preset cache release rule.

7. The method according to any one of claims 1 to 6, characterized in that When the image rendering is completed, the image rendering completion event is transmitted back to the framework layer of the React Native application, including: If the mobile device is an Android system, a timer monitoring control is enabled to monitor the rendering process of the native view, and when the native view rendering is completed, a picture rendering completion event is transmitted back to the framework layer of the React Native application; If the mobile device is an IOS system, the KVO control is started to monitor the rendering process of the native view, and when the native view rendering is completed, the image rendering completion event is returned to the framework layer of the React Native application.

8. A picture loading device based on a native module of a mobile terminal, characterized in that: Applied to a mobile device based on a React Native application, the device comprises: An access module, used to create a native module based on the native function of the mobile terminal, and access the native module in the React Native application of the mobile device; A resource acquisition module, configured to, when the React Native application receives a picture loading request, call the native module through the React Native application to acquire a picture resource corresponding to the picture loading request, and transmit the picture resource back to the framework layer of the React Native application; A view creation module, used for the framework layer of the React Native application to create a picture view corresponding to the picture resource, and to call the native module to create a native view corresponding to the picture view; The loading module is used to load the image resource into the native view for image rendering based on the native module, and transmit the image rendering completion event back to the framework layer of the React Native application when the image rendering is completed to realize image display.

9. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.

10. A computer device comprising a storage medium, a processor, and a computer program stored in the storage medium and executable on the processor, characterized in that: When the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.

Images