ToolbarAndroid图片路径异常排查：React Native新手技术求助

嘿，作为React Native新手碰到这种路径问题太正常了，我帮你拆解一下可能的原因和对应的解决办法：

1. 相对路径层级错误（最常见原因） #

你当前的Home.js在./src/component/Module/目录下，代码里写的./images/app_logo.png是相对于Home.js所在目录的路径，这意味着RN会去./src/component/Module/images/找图片，但显然你的图片不在这个位置（你应该是把images放在项目根目录了吧？）。

如果你的图片确实在项目根目录的./images/下，那正确的相对路径应该是往上回溯三级目录：

// 从Module → component → src → 项目根目录，再进入images
require('../../../images/app_logo.png')

2. 没有用require()引入本地图片 #

React Native加载本地静态资源（图片、字体等）必须通过require()方法，不能直接写字符串路径。如果你的代码里是直接把路径字符串传给logo属性，那肯定会报错，正确的写法应该是：

<ToolbarAndroid
  logo={require('../../../images/app_logo.png')}
  // 其他属性...
/>

3. 文件名大小写不匹配 #

如果你是在Linux或macOS环境下开发，系统是区分文件名大小写的。比如你代码里写的是app_logo.png，但实际文件是App_Logo.png，这种情况下RN也会找不到文件，仔细核对一下文件名的拼写和大小写。

4. Metro打包器未包含图片目录 #

虽然这种情况很少见，但可以检查一下项目根目录的metro.config.js，确保配置里没有排除images目录。默认的metro配置会包含项目根目录下的所有文件，如果你修改过配置，记得把images加入到resolver.assetExts或者watchFolders中。

举个完整的修正后代码示例：

'use strict';
import React, { Component } from 'react';
import { ToolbarAndroid } from 'react-native';

class Home extends Component {
  render() {
    return (
      <ToolbarAndroid
        logo={require('../../../images/app_logo.png')}
        title="我的首页"
        style={{ height: 56, backgroundColor: '#1976D2' }}
      />
    );
  }
}

export default Home;

先从前两个原因排查，大概率就能解决问题啦！

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