反應本機 - 需要未知的模塊

我一直在嘗試在ListView中加載本地圖像文件。反應本機 - 需要未知的模塊

它的工作時，我硬代碼：

var path = rowData.thumbnail; 
console.log(path); // './public/image1.png' 
return <Image source={require(path)} style={{width: 60, height: 60}}/>

或像這樣：

return <Image source={require('./public/image1.png')} style={{width: 60, height: 60}}/>

但是，它並沒有，當我讀到的圖像這樣的路徑工作：

return <Image source={require(rowData.thumbnail)} style={{width: 60, height: 60}}/>

與此錯誤消息，

需要未知模塊「'./ public/image1.png'」。如果您確定模塊存在，請嘗試重新啓動打包程序或運行「npm install」。

你能給我一個建議，從對象中讀取路徑嗎？我附上了下面的完整代碼。先謝謝你。

class MyClass extends Component { 
    constructor(props) { 
    super(props); 
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    let data = importedData.map(function(d) { 
     return { 
     thumbnail: "'./public" + d.thumbnail + "'" 
     } 
    }); 
    this.state = { 
     dataSource: ds.cloneWithRows(data) 
    }; 
    } 
    renderRow(rowData) { 
    var path = rowData.thumbnail; 
    return <View style={{flex: 1, flexDirection: 'row'}}> 
     <Image source={require(path)} style={{width: 60, height: 60}}/> 
    </View> 
    } 
    render() { 
    return (
     <View style={{paddingTop: 22}}> 
     <ListView 
      dataSource={this.state.dataSource} 
      renderRow={this.renderRow} 
     /> 
     </View> 
    ); 
    } 
}

來源

2016-08-23 user2499003

檢查模塊源內部具有出口指令。你有沒有嘗試在nodejs shell上加載模塊？ –

按照React-Native Docs有一對夫婦的方式來指定你的圖片來自：

本地存儲：

<Image source={require('./img/favicon.png')}/>

網：

<Image source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/>

動態字符串例如rowData.thumbnail只能用於打包圖像。看到這個issue。

如果您的圖片加載到iOS上images.xcassets和RES /繪製在Android上，你可以通過文件名，像這樣引用它們：

<Image source={{uri:'thumbnailFileName'}}/>

或..

<Image source={{uri:rowData.thumbnail}}/>

您還可以用相同的方式指定佔位符。

<Image source={{uri:rowData.thumbnail}} defaultSource={{uri:'placeholder'}}/>

工作演示 - https://rnplay.org/apps/tsiGfQ

來源

2016-08-23 09:20:01

我在images.xcassets中加載圖像，並返回相同的錯誤。我可以加載圖像時，我需要硬編碼uri或路徑。但是，我無法通過rowData.thumbnail加載相同的錯誤消息。我認爲它不能從rowData.thumbnail中讀取文本值。我該如何解決這個問題？ – user2499003

rowData.thumbnail返回什麼？你是在模擬器還是在設備上運行？ –

我認爲這個問題是動態字符串不能被接受的要求在反應原生。我現在只是用開關來繃帶，但還沒有找到最終的解決方案。如果您有任何想法，請告訴我。 :) – user2499003

反應本機 - 需要未知的模塊

回答

相關問題