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