Gif 在 React Native iOS 中不起作用

Posted 2023-03-15

【中文标题】Gif 在 React Native iOS 中不起作用

【英文标题】：Gif not working in React Native iOS

【发布时间】：2016-08-19 18:24:34

【问题描述】：

我正在使用 react 15.2.1 和 react-native 0.30.0

我查看了How do I display an animated gif in React Native? 并按照说明进行操作。

<Image source= uri: 'http://i.giphy.com/l41YiEvBtjGKNlzby.gif'
       style= height: 250, width: 250  />

也试过了

<Image source=require('./path/to.gif')
       style= height: 250, width: 250  />

但是 gif 没有显示。如果我关闭图像的链接，它可以正常工作。

我检查了这个工作示例https://rnplay.org/apps/739mzQ，但无法使用 0.30.0 对其进行测试，所以我想知道从那时起是否发生了变化。

【问题讨论】：

你解决了吗？有些 Giphy 图像会显示给我，有些则不会

【参考方案1】：

也许在你的项目中添加 gif 并使用 require 函数。

【讨论】：

这里是解决您问题的链接***.com/questions/35594783/…

【参考方案2】：

请试试这个例子

import React, Component from 'react';
import  StyleSheet,  View from 'react-native';
const SplashGif = require('./images/Wallpaper.gif');

export default class App extends Component 
  render() 
    const  container, imageStyles  = styles;
    return (
      <View style=container>
        <Image source=SplashGif style=imageStyles />
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  imageStyles: 
    resizeMode: 'stretch',
    width: '100%',
    height: '100%'
  
);

【参考方案3】：

使用此代码：

import React, Component from 'react';
import  StyleSheet, Image,Text, View from 'react-native';
const Splash = require('./images/testGif.gif')

class SplashSrceen extends Component 

  render() 
    const  container, splashgif  = styles;
    return (
      <View style=container>
        <Image source=Splash style=splashgif />
        <Text>or</Text>
        <Image source=uri:'https://media.tenor.com/images/0a1652de311806ce55820a7115993853/tenor.gif'style=splashgif />
    </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  splashgif: 
    resizeMode: 'stretch',
    width: '100%',
    height: '50%'
  
);

export default SplashSrceen ;

安卓

为了解决这个问题，我们添加了以下库：

dependencies 
    implementation 'com.facebook.fresco:fresco:1.10.0'
    implementation 'com.facebook.fresco:animated-gif:1.10.0'