React Native + TypeScript中导入图片报错，如何解决？

问题1：使用 <img> 标签报错 #

React Native 是原生应用框架，不支持 Web 的 <img> 标签，报错原因有两点：

• <img> 不是 React Native 内置组件，框架无法识别其视图配置
• React 规范要求组件名称必须以大写字母开头

解决方法：直接替换为 React Native 官方提供的 Image 组件。

问题2：Image 组件类型错误 #

报错核心是 source 属性类型不匹配，以及可能的导入/类型配置问题，按以下步骤解决：

1. 确保正确导入组件与类型 #

从 react-native 正确导入 Image 和相关类型：

import { Image, ImageSourcePropType, StyleSheet } from 'react-native';

2. 修正 source 属性的类型 #

不要使用 any 类型，根据图片来源选择正确写法：

• 本地图片：用 require() 直接引入，TypeScript 会自动识别类型
• 网络图片：使用 { uri: '图片地址' }，并可显式指定类型为 ImageSourcePropType

3. 修正后的完整代码示例 #

import React from 'react';
import { Image, StyleSheet, View, ImageSourcePropType } from 'react-native';

const DemoComponent = () => {
  // 网络图片可提前定义类型
  const networkImageSource: ImageSourcePropType = {
    uri: 'https://example.com/your-image.jpg'
  };

  return (
    <View style={styles.container}>
      {/* 本地图片示例 */}
      <Image
        source={require('./assets/your-local-image.png')}
        style={styles.image}
      />
      {/* 网络图片示例 */}
      <Image
        source={networkImageSource}
        style={styles.image}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  image: {
    width: 200,
    height: 200,
    alignSelf: 'center',
    marginBottom: 20,
  },
});

export default DemoComponent;

4. 额外检查：确认 TypeScript 类型依赖 #

如果仍有类型报错，检查是否安装了 React Native 的 TypeScript 类型定义：

npm install @types/react-native --save-dev
# 或 yarn
yarn add @types/react-native --dev

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