如何在 react-native 中添加 GIF？

React-native 是一个跨平台的移动应用程序开发工具。它是建立在 Javascript 之上的框架之一。现在让我们进入正题。我们通常使用 .jpeg 或 .png 图像，因为我们对它们更友好。但是如果你想为你的 react native 项目添加 GIF 支持怎么办。本文将展示如何在 react-native 中添加 GIF。现在，react-native 具有支持 GIF 的灵活性。

下面是分步实现。

第 1 步：使用以下命令创建一个 react-native 项目

npx react-native init DemoProject

第 2 步：现在，在您的项目中，创建一个组件文件夹。在该组件文件夹中，创建一个文件 AddGif.js

项目结构：它将如下所示。

第 3 步：转到您的项目并导航到 android>app>build.gradle 并将以下内容添加到 build.gradle 文件中的依赖项中。

dependencies {
    ...
    // For animated GIF support
    implementation 'com.facebook.fresco:animated-gif:2.5.0'
}

我们正在添加 gif:2.5.0 版本，因为 react-native 最新版本（0.67）需要它。如果您使用的是较低的 react-native 版本，请查看 react-native 文档以获取该特定版本的 gif 支持。添加依赖项后，使用以下命令重新启动服务器。

npx react-native run-android

第 4 步：在 AddGif.js 中，我们将使用 react-native 库的 Image 组件展示 GIf。

AddGif.js

import React from "react";
import {Text ,View , Image , StyleSheet} from 'react-native' ;
  
const AddGifImage = () => {
    return (
        
          
        
      );
}
  
const Styles = StyleSheet.create({
    container :{
        alignContent:'center',
        margin:25
    }
})
  
export default AddGifImage;

App.js

import React from 'react';
import type {Node} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import AddGifImage  from './components/AddGif';
  
const App: () => Node = () => {
   return (
      
       
      
      ); 
};
  
export default App;

第 5 步：现在，将 AddGif.js 导入您的 App.js 文件

应用程序.js

import React from 'react';
import type {Node} from 'react';
import { StyleSheet, Text, View} from 'react-native';
import AddGifImage  from './components/AddGif';
  
const App: () => Node = () => {
   return (
      
       
      
      ); 
};
  
export default App;

运行应用程序的步骤：打开终端并键入以下命令。

npx react-native run-android

注意：在 build.gradle 中添加实现行后，不要忘记重新启动 Metro 服务器。

输出：