在使用Image載入本地圖片碰到一個小坑,在這裡記錄下。
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