Gif在React Native iOS中不起作用

Question

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

我检查了如何在React Native中显示动画gif？ 并按照指示进行。

<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进行测试，因此我想知道此后是否有所改变。

Answer 1

也许将gif添加到您的项目中并使用require函数。

Answer 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%'
  }
});

Answer 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'
}