Gif无法在React Native iOS中运行

时间:2016-08-19 18:24:35

标签: ios image reactjs react-native

我正在使用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进行测试,所以我想知道自那时以来是否有变化。

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

  

请尝试以下示例


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


答案 2 :(得分:0)

使用此代码:

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