Gif不工作在React NativeiOS

Question

我正在使用反应15.2.1和反应原生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

使用此代码：

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 ;

Android系统

为了纠正这一问题，我们包括以下库：

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

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

也许可以将gif添加到您的项目并使用需求函数。