如何在react-navigation中正确实现抽屉项图标？现有方案报React未定义错误

你遇到的Reference Error: React is not Defined问题其实根源很清晰——在使用JSX的代码块里没有导入React。所有JSX语法最终都会被编译成React.createElement()调用，一旦缺失React的导入，运行时就找不到这个核心对象，自然会抛出错误。

下面是一步步的解决方案：

1. 导入必要的依赖 #

在定义drawerRouteConfig的文件顶部，必须添加React的导入，同时确保你已经导入了React Native的Image和Dimensions组件（因为你用到了动态计算的width变量）：

import React from 'react';
import { Image, Dimensions } from 'react-native';
// 别忘了导入你的各个Stack组件：InboxStack, DiscoverStack, AccountStack

2. 正确初始化width变量 #

你代码里用到的width需要先通过Dimensions获取设备窗口宽度，所以在配置路由前先定义这个变量：

const { width } = Dimensions.get('window');

3. 修正路由配置的完整写法 #

确保每个需要图标的路由都在navigationOptions里正确配置drawerIcon，让JSX语法能正常编译。完整的配置示例如下：

const drawerRouteConfig = {
  Inbox: {
    screen: InboxStack,
    navigationOptions: {
      drawerIcon: () => (
        <Image 
          source={require('../assets/img/white-inbox.png')} 
          style={{ 
            height: width * 0.05, 
            width: width * 0.05,
            resizeMode: 'contain' 
          }} 
        />
      )
    }
  },
  Discover: {
    screen: DiscoverStack,
    // 按需给Discover添加图标
    navigationOptions: {
      drawerIcon: () => (
        <Image 
          source={require('../assets/img/white-discover.png')} 
          style={{ height: width * 0.05, width: width * 0.05, resizeMode: 'contain' }} 
        />
      )
    }
  },
  Account: {
    screen: AccountStack,
    // 按需给Account添加图标
    navigationOptions: {
      drawerIcon: () => (
        <Image 
          source={require('../assets/img/white-account.png')} 
          style={{ height: width * 0.05, width: width * 0.05, resizeMode: 'contain' }} 
        />
      )
    }
  },
};

额外注意点 #

• 确认你的图片路径是正确的，../assets/img/white-inbox.png要和项目中实际的文件位置匹配，否则会出现图片加载失败的问题。
• 从你的代码结构来看应该是使用React Navigation v4版本，上面的方案完全适配；如果是v5及以上版本，路由配置写法会有差异，但核心的React导入和JSX使用逻辑是一致的。

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