React Native 0.62.2 iOS15下Image组件tintColor失效如何解决

问题原因 #

你遇到的是React Native旧版本与iOS15+的兼容性问题：React Native 0.62.2发布早于iOS15正式版，底层对UIImage的渲染模式适配没有覆盖iOS15的新逻辑，导致tintColor无法被正确应用到图片上。

解决方案 #

不需要为每种颜色单独准备图片资源，可通过以下方案解决：

方案1：最小改动适配（无需修改原生/全局代码） #

在所有用到tintColor的Image组件上，添加iOS专属的renderingMode="template"属性即可，安卓端会自动忽略该属性，不影响原有逻辑。示例代码：

<Image
  style={{width: 50, height: 50, tintColor: 'yellow'}}
  source={fabicon}
  renderingMode="template"
/>

方案2：全局统一适配 #

如果项目中有大量使用tintColor的图片，可封装全局自定义Image组件，统一注入兼容逻辑，后续直接使用该组件即可：

import { Image, Platform } from 'react-native';

const CompatibleImage = ({ style, ...rest }) => {
  const iosProps = Platform.OS === 'ios' && style?.tintColor ? 
    { renderingMode: 'template' } : {};
  return <Image style={style} {...iosProps} {...rest} />;
};

export default CompatibleImage;

方案3：官方修复方案 #

该兼容性问题已在React Native 0.64.0及以上版本被官方修复，如果项目可接受版本升级，将RN升级到0.64.0+后，原有tintColor逻辑无需任何额外改动即可在iOS15+正常运行。

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