React Native：無法加載圖像

我編寫了一個簡單的iOS程序來使用React Native顯示圖像。React Native：無法加載圖像

'use strict'; 

var React = require('react-native'); 
var { 
    Image 
} = React; 

var styles = React.StyleSheet.create({ 

    base: { 
    height: 400, 
    width: 400 
} 
}); 

class SimpleApp extends React.Component { 
    render() { 
    return (
    <Image 
    style={styles.base} 
    source={require('image!k')} 
    //source={{uri: 'http://news.xinhuanet.com/world/2015-05/09/127782089_14311512601821n.jpg'}} 
     /> 
    ) 
    } 
} 

React.AppRegistry.registerComponent('SimpleApp',() => SimpleApp);

但我從iPad屏幕消息：

"Failed to print error:","'undefined' is not an object (evaluating 'stackString.split')"

當我修改代碼，使用圖像的URL

//source={require('image!k')} 
source={{uri: 'http://news.xinhuanet.com/world/2015-05/09/127782089_14311512601821n.jpg'}}

我只得到一個紅色的矩形邊框。

當我使用另一個js文件時，一切正常，「Hello World」可以在iPad屏幕上顯示。

'use strict'; 

var React = require('react-native'); 
var { 
    Text, 

} = React; 


class SimpleApp extends React.Component { 
    render() { 
    return (

     <Text>Hello World</Text> 

    ) 
    } 
} 

React.AppRegistry.registerComponent('SimpleApp',() => SimpleApp);

來源

2015-05-09 Han Pengbo

網絡''裝載機現在只支持'png'從我可以告訴。 '靜態加載圖片時'jpg'支持[ref]（https://github.com/facebook/react-native/blob/72c5e5d981a21ede12dcd76de5ca22a398c8bcaf/packager/packager.js#L203） 'source = {require（ 'image'k'）}'用於靜態加載圖像，將'k'更改爲本地存儲的圖像名稱，'require'會將您的圖像base'64到應用程序 'source = {{uri：'http ：// ...'}}'用於從網絡加載圖像，您正在加載一個看起來不受支持的jpeg - 嘗試加載png代替 – potench

確保您使用的是最新版本的React Native。與之反應原生0.4.4以下工作：

本地圖像

<Image 
    style={styles.base} 
    source={require('image!tabnav_settings')} 
    />

另外，還要確保你添加你想用你的形象資產圖像：

Xcode Images.xcassets

遠程圖像

<Image 
    style={styles.base} 
    source={{uri: 'http://i.stack.imgur.com/DfkfD.png'}} 
    />

來源

2015-05-26 19:50:38 peter

謝謝，它爲我工作。 – Tirth

這也是一樣的機器人。如果您將圖像添加到可繪製文件夾，則可以動態使用它們。 –

@the_bluescreen反應原生0.27.2。在那個版本中，我們不再需要將圖像放入drawable中。在開發中它工作正常，但在生產圖像不加載？任何建議，將不勝感激謝謝 –

正如@potench在評論中指出的那樣，使用.jpg擴展名加載靜態圖片目前沒有工作。但如果你只是將你的JPG文件重命名爲png，那麼一切正常。另請參見https://github.com/facebook/react-native/issues/521

來源

2015-07-01 04:12:16

React Native：無法加載圖像

回答

相關問題