【技術實現步驟摘要】
本申請涉及計算機和金融科技，尤其是涉及到一種基于移動端原生模塊的圖片加載方法、裝置、介質及設備。
技術介紹
1、react?native客戶端框架作為一款開源的跨平臺移動開發解決方案，廣泛兼容ios與android操作系統，在金融科技領域的應用開發中展現出巨大潛力。在金融科技應用的界面中，展示圖片元素是一項基本且至關重要的功能，通常的做法是依賴于框架內置的圖片控件。這些控件憑借框架自身的刷新機制，能夠在頁面重新渲染時通過更改圖片控件的源(source)來實現圖片的更新。對于需要動態更新的一組圖片，開發者可以通過設置循環定時器來定期刷新，以滿足實時性要求。
2、然而，當面對高分辨率的圖像素材或是高幀率的動態圖像(如金融數據可視化中的實時圖表動畫)時，傳統方法即直接使用框架層的圖片控件進行加載，可能會暴露出性能瓶頸。這種情況下，圖片渲染速度可能會顯著下降，動態圖像的播放甚至可能出現丟幀現象，嚴重影響用戶體驗和數據呈現的準確性。
3、因此，在金融科技這一對精準度和實時性要求極高的領域內，探索更為高效、流暢的圖片與動態圖像展示方案，成為了提升應用性能和用戶體驗的關鍵所在。
技術實現思路
1、有鑒于此，本申請實施例提供了一種基于移動端原生模塊的圖片加載方法、裝置、介質及設備，通過原生模塊與react?native框架的緊密結合，提升了圖片加載和渲染的效率。
2、根據本申請的一個方面，提供了一種基于移動端原生模塊的圖片加載方法，應用于基于react?nati
3、基于移動端原生功能創建原生模塊，在移動設備的react?native應用中接入所述原生模塊；
4、當所述react?native應用接收到圖片加載請求時，通過所述react?native應用調用所述原生模塊獲取與所述圖片加載請求對應的圖片資源，并將所述圖片資源回傳至所述react?native應用的框架層；
5、所述react?native應用的框架層創建所述圖片資源對應的圖片視圖，調用所述原生模塊創建所述圖片視圖對應的原生視圖；
6、基于所述原生模塊將所述圖片資源加載至所述原生視圖中進行圖片渲染，并在圖片渲染完成時將圖片渲染結束事件回傳至所述react?native應用的框架層，以實現圖片顯示。
7、在本申請實施例中，可選地，所述調用所述原生模塊創建所述圖片視圖對應的原生視圖之后，所述方法還包括：
8、將所述原生視圖添加至所述react?native應用的ui管理控件中；
9、所述react?native應用的框架層接收到所述圖片渲染結束事件后，基于所述ui管理控件對所述原生視圖的生命周期進行管理。
10、在本申請實施例中，可選地，所述通過所述react?native應用調用所述原生模塊獲取與所述圖片加載請求對應的圖片資源，并將所述圖片資源回傳至所述react?native應用的框架層，包括：
11、所述react?native應用通過預定義的應用程序接口調用所述原生模塊查詢與所述圖片加載請求對應的圖片資源是否已存在于本地；
12、若未存在于本地，則通過所述原生模塊將所述圖片加載請求對應的圖片資源下載至緩存中，并將所述圖片資源的路徑信息回傳至所述react?native應用的框架層；
13、若已存在于本地，則將所述圖片資源的路徑信息回傳至所述react?native應用的框架層；
14、相應地，所述react?native應用的框架層創建所述圖片資源對應的圖片視圖，包括：
15、所述react?native應用的框架層創建所述圖片資源的路徑信息對應的圖片視圖。
16、在本申請實施例中，可選地，所述若已存在于本地，則將所述圖片資源的路徑信息回傳至所述react?native應用的框架層，包括：
17、若所述圖片資源被下載至緩存中，則將所述圖片資源的路徑信息回傳至所述react?native應用的框架層；
18、若所述圖片資源被保存在磁盤中，則磁盤中的圖片資源加載至操作系統的內核緩沖區，并從內核緩沖區復制到用戶空間，將用戶空間中的圖片資源賦值給所述原生模塊，所述原生模塊將圖片資源的路徑信息回傳至所述react?native應用的框架層。
19、在本申請實施例中，可選地，所述基于所述原生模塊將所述圖片資源加載至所述原生視圖中進行圖片渲染，包括：
20、識別所述原生視圖對應的圖片是否屬于預設重復展示類型；
21、若屬于所述預設重復展示類型，則直接基于所述原生模塊對所述圖片資源進行解碼得到位圖數據存儲在緩存中，并在接收到所述react?native應用發送的圖片渲染指令時，基于所述緩存中的所述位圖數據加載至所述原生視圖中進行圖片渲染；
22、若不屬于所述預設重復展示類型，則在接收到所述react?native應用發送的圖片渲染指令時，基于所述原生模塊將所述圖片資源解碼為位圖數據，將所述位圖數據加載至所述原生視圖中進行圖片渲染，并在圖片渲染完成時刪除所述位圖數據。
23、在本申請實施例中，可選地，若屬于所述預設重復展示類型，則直接基于所述原生模塊對所述圖片資源進行解碼得到位圖數據存儲在緩存中之后，所述方法還包括：
24、在所述緩存的剩余容量低于預設容量閾值時，依據預設緩存釋放規則對所述緩存中的圖片資源和位圖數據進行釋放。
25、在本申請實施例中，可選地，所述在圖片渲染完成時將圖片渲染結束事件回傳至所述react?native應用的框架層，包括：
26、若所述移動設備為安卓系統，則啟用定時器監聽控件對所述原生視圖的渲染過程進行監聽，在所述原生視圖渲染結束時將圖片渲染結束事件回傳至所述react?native應用的框架層；
27、若所述移動設備為ios系統，則啟動kvo控件對所述原生視圖的渲染過程進行監聽，在所述原生視圖渲染結束時將圖片渲染結束事件回傳至所述react?native應用的框架層。
28、根據本申請的另一方面，提供了一種基于移動端原生模塊的圖片加載裝置，應用于基于react?native應用的移動設備中，所述裝置包括：
29、接入模塊，用于基于移動端原生功能創建原生模塊，在移動設備的react?native應用中接入所述原生模塊；
30、資源獲取模塊，用于當所述react?native應用接收到圖片加載請求時，通過所述react?native應用調用所述原生模塊獲取與所述圖片加載請求對應的圖片資源，并將所述圖片資源回傳至所述react?native應用的框架層；
31、視圖創建模塊，用于所述react?native應用的框架層創建所述圖片資源對應的圖片視圖，調用所述原生模塊創建所述圖片視圖對應的原生視圖；
32、加載模塊，用于基于所述原生本文檔來自技高網...
【技術保護點】
1.一種基于移動端原生模塊的圖片加載方法，其特征在于，應用于基于React?Native應用的移動設備中，所述方法包括：
2.根據權利要求1所述的方法，其特征在于，所述調用所述原生模塊創建所述圖片視圖對應的原生視圖之后，所述方法還包括：
3.根據權利要求1所述的方法，其特征在于，所述通過所述React?Native應用調用所述原生模塊獲取與所述圖片加載請求對應的圖片資源，并將所述圖片資源回傳至所述ReactNative應用的框架層，包括：
4.根據權利要求3所述的方法，其特征在于，所述若已存在于本地，則將所述圖片資源的路徑信息回傳至所述React?Native應用的框架層，包括：
5.根據權利要求1所述的方法，其特征在于，所述基于所述原生模塊將所述圖片資源加載至所述原生視圖中進行圖片渲染，包括：
6.根據權利要求5所述的方法，其特征在于，若屬于所述預設重復展示類型，則直接基于所述原生模塊對所述圖片資源進行解碼得到位圖數據存儲在緩存中之后，所述方法還包括：
7.根據權利要求1至6中任一項所述的方法，其特征在于，
8.一種基于移動端原生模塊的圖片加載裝置，其特征在于，應用于基于React?Native應用的移動設備中，所述裝置包括：
9.一種存儲介質，其上存儲有計算機程序，其特征在于，所述計算機程序被處理器執行時實現權利要求1至7中任一項所述的方法。
10.一種計算機設備，包括存儲介質、處理器及存儲在存儲介質上并可在處理器上運行的計算機程序，其特征在于，所述處理器執行所述計算機程序時實現權利要求1至7中任一項所述的方法。
...【技術特征摘要】
1.一種基于移動端原生模塊的圖片加載方法，其特征在于，應用于基于react?native應用的移動設備中，所述方法包括：
2.根據權利要求1所述的方法，其特征在于，所述調用所述原生模塊創建所述圖片視圖對應的原生視圖之后，所述方法還包括：
3.根據權利要求1所述的方法，其特征在于，所述通過所述react?native應用調用所述原生模塊獲取與所述圖片加載請求對應的圖片資源，并將所述圖片資源回傳至所述reactnative應用的框架層，包括：
4.根據權利要求3所述的方法，其特征在于，所述若已存在于本地，則將所述圖片資源的路徑信息回傳至所述react?native應用的框架層，包括：
5.根據權利要求1所述的方法，其特征在于，所述基于所述原生模塊將所述圖片資源加載至所述原生視圖中進行圖片渲染，包括：
6....
【專利技術屬性】
技術研發人員：廖林鎮，鄒昆倫，
申請(專利權)人：平安科技深圳有限公司，
類型：發明
國別省市：
還沒有人留言評論。發表了對其他瀏覽者有用的留言會獲得科技券。