React-Native 之 Image加载本地图片的坑

在使用React-Native 的 Image加载本地图片碰到一个小坑,在这里记录下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';

export default class BillProject extends Component {
constructor(props) {
super(props);
}
render() {
console.log("render");
var data={src:require('./images/spr_header_background_0.png')}
var imgLocalUrl = './images/spr_header_background_0.png'
return (
<View>
<Text>网络图片</Text>
<Image style={styles.image_uri}
source={ {uri: "http://api.all-appp.com/uploads/uu/20161122/1479774912zuopin9146658userfile.png"}}
>
</Image>
<Text>本地图片成功</Text>
<Image style={styles.image_bg}
source={data.src}//source={require(imgLocalUrl)} //这样写则不行
>
</Image>

</View>
);
}

}
var G_SCREEN_WIDTH = require('Dimensions').get('window').width;
const styles = StyleSheet.create({
main_view:{
width:G_SCREEN_WIDTH,
height:80,
},
image_bg:{
width:G_SCREEN_WIDTH/2,
height:80,
},
image_uri:{
width:120,
height:160,
}
});
AppRegistry.registerComponent('BillProject', () => BillProject);

本地图片加载时使用source={require(imgLocalUrl)} 则不行,会报错。

有的时候会需要把路径先存在变量中再require。

但是require的参数不能是个变量 /(ㄒoㄒ)/~~,会导致路径问题,具体原因在官网找到了解释。




查到官网Note:Image require正确使用姿势→






原因:在打包脚本执行的时候图片路径就已经打包进去,所以不能用变量的形式。

参考味精的博客链接:Talk about ReactNative Image Component





点击查看效果图