使用Expo+TypeScript开发React Native时Image组件Style传参报错

你在Expo+TypeScript+UI Kitten环境下给Image组件传递style时触发报错，核心原因多为组件导入混淆或TypeScript类型不匹配，以下是具体解决步骤：

1. 确认Image组件的导入来源 #

UI Kitten封装的Image组件与React Native原生Image的类型定义存在差异，混用会导致style属性校验失败：

• 若使用UI Kitten的Image，导入语句必须是：

  import { Image } from '@ui-kitten/components';
  

• 若使用原生RN Image，导入语句为：

  import { Image } from 'react-native';
  

  注意不要同时导入两个不同的Image组件，避免命名冲突。

2. 显式指定StyleSheet类型 #

如果导入正确仍报错，可通过显式定义StyleSheet的类型来匹配Image组件的style要求：

import { StyleSheet, ImageStyle } from 'react-native';

const styles = StyleSheet.create<Record<string, ImageStyle>>({
  modalImage: {
    width: 315,
    height: 255,
    marginVertical: 10,
    borderWidth: 3,
    borderRadius: 20,
  },
  storeImage: {
    borderRadius: 4,
    width: "100%",
    height: "100%",
  },
});

3. 升级UI Kitten到最新稳定版 #

部分旧版本UI Kitten存在类型定义bug，执行以下命令升级依赖：

npm install @ui-kitten/components@latest @eva-design/eva@latest
# 或使用yarn
yarn add @ui-kitten/components@latest @eva-design/eva@latest

4. 校验版本兼容性 #

确保Expo SDK、UI Kitten、React Native三者版本兼容，版本差异过大可能引发类型校验错误，可根据Expo官方文档调整对应依赖版本。

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