FlatList本地图片无法渲染问题排查求助

嘿，我刚看完你的问题，这是React Native里加载本地资源时很容易踩的一个小坑！

问题根源 #

你现在用source={{uri: item.logo}}的方式加载本地图片是不对的——React Native中，项目内的本地静态资源（比如你放在项目文件夹里的图片）必须通过require()方法引入，而uri参数是用来加载网络图片或者设备本地文件系统里的图片的。RN在打包阶段会对require()引入的资源做索引和处理，直接用uri的话它找不到这些本地图片。

修复步骤 #

把Image组件的source属性修改为require('./' + item.logo)，注意这里的./要根据你的图片实际存放路径调整：

• 如果图片和当前HomeScreen组件文件在同一目录，用./就可以；
• 如果图片放在assets/images这样的子目录，就要写成require('./assets/images/' + item.logo)。

修改后的完整代码 #

export default class HomeScreen extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      searchText: '', 
    }; 
  } 

  render() { 
    // Data can be coming from props or any other source as well 
    const data = [ 
      { key: 'Athlean-X', logo: 'athlean_x.png' }, 
      { key: 'Panelaria Ricardo Faria', logo: "euro2020.png" }, 
      { key: 'tEsLa', logo: "jamor.png" }, 
      { key: 'Lols Inc.', logo: "rock_in_rio.png" }, 
      { key: 'Vale de Silicone', logo: 'splash.png' }, 
      { key: 'Empresa do Helder', logo: "edp_cooljazz.png" }, 
      { key: 'BD Swiss', logo: "superbock_superrock.png" } 
    ]; 

    const filteredData = this.state.searchText ? 
      data.filter(x => x.key.toLowerCase().includes(this.state.searchText.toLowerCase()) ) 
      : data; 

    return ( 
      <View style={styles.container}> 
        <View style={styles.flatlist}> 
          <FlatList 
            data={filteredData} 
            renderItem={({ item }) => ( 
              <View style={{flexDirection:'row'}}> 
                {/* 核心修改就在这里 */}
                <Image 
                  style={{width:50, height:50, alignSelf: 'center', borderRadius:300}} 
                  source={require('./' + item.logo)} 
                /> 
                <Text style={styles.item}>{item.key}</Text> 
              </View> 
            )} 
          /> 
        </View> 
      </View> 
    ); 
  } 
}

额外注意事项 #

• 确认图片文件名和data数组里的logo字段完全一致，RN对文件名的大小写是敏感的；
• 如果你的图片放在自定义的资源目录（比如assets），记得检查metro.config.js里是否配置了该目录的资源解析规则，避免打包时遗漏资源。

内容的提问来源于stack exchange，提问作者Tiago 2.0