資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學在React Native應用中新增動畫載入器和啟動畫面
在這篇文章中，我們將學習如何在React Native應用中實現Lottie動畫。Lottie是一個開源動畫檔案格式，它體積小、質量高、互動性強，並且可以在執行時進行操作。Lottie動畫主要用於載入畫面或啟動畫面。
那麼，讓我們將Lottie動畫新增到我們的React Native移動應用程式中。
示例
訪問Lottie動畫官方網站並下載Lottie JSON檔案。
我將使用的動畫連結：
https://lottiefiles.com/74546-character-02# /
將JSON檔案命名為**"myloader.json"**，並將其放在與**App.js**相同的目錄下。
現在安裝**lottie-react-native**包
npm i --save lottie-react-native
Lottie庫將用於將Lottie動畫的JSON檔案新增到您的React Native應用程式中。
要新增下載的動畫，首先從**lottie-react-native**匯入**LottieView**。
接下來，在**App.js**中插入以下程式碼：
import React from 'react';
import LottieView from 'lottie-react-native';
const App = () => {
return (
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<LottieView source={require('./myloader.json')} autoPlay loop/>
</View>
);
}
export default App;在**LottieView**的source屬性中，您需要提供下載的Lottie JSON檔案的路徑來實現該動畫。
輸出
執行後，將產生以下輸出：
更新於：2021年9月29日
497 次瀏覽
廣告