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

发表于 | 分类于
字数统计: 353 | 阅读时长 ≈ 1

在使用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





点击查看效果图