React Native學習之Image載入本地圖片的坑(iOS)

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