Question

我一直在尝试在ListView中加载本地图像文件。

当我硬编码时它确实有效：

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

但是，当我读取图像的路径时，它不起作用：

var path = rowData.thumbnail;
console.log(path); // './public/image1.png'
return <Image source={require(path)} 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>
    );
  }
}

Answer 1

根据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 和Android上的 res / drawable ，您可以通过文件名引用它们，如下所示：

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

或..

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

您也可以用相同的方式指定占位符..

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

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

本机反应 - 需要未知模块

1 个答案: