iOS：如何全局重写UIActivityIndicatorView的默认颜色？

嘿，作为iOS新手搞混合开发，碰到这种没法直接碰原生框架的UI调整问题确实有点懵吧？我给你几个实用的方案，思路和Android用主题改颜色差不多，你可以按需尝试：

1. 全局配置应用Tint颜色（最贴近Android主题的思路） #

iOS里的系统原生控件（包括UIActivityIndicatorView）会默认继承应用的tintColor，这就和Android主题里全局设置控件颜色的逻辑一模一样。如果你没法写原生代码，可以通过修改项目里的Info.plist配置文件来实现：

• 找到项目中的Info.plist文件（一般在原生iOS目录下），添加以下键值对：

<key>UIView tintColor</key>
<string>#FF5733</string> <!-- 替换成你想要的十六进制颜色值 -->

这个设置会让所有系统原生的指示器自动用上你指定的颜色，一次配置全局生效，完全不用碰JS之外的代码。

2. 用自定义JS加载指示器替代原生控件 #

如果全局配置没法满足需求，或者你想更灵活地控制样式，最简单的办法就是关闭原生的加载指示器，自己用HTML/CSS/JS写一个自定义的加载动画：

• 首先关闭WebView的原生加载指示器（不同混合框架的设置方式略有不同，比如Cordova可以在config.xml里配置相关属性，或者直接在JS里禁用）；
• 然后添加一个自定义的加载组件：

<!-- 自定义加载指示器 -->
<div id="customLoader" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999;">
  <div style="width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top-color: #FF5733; border-radius: 50%; animation: spin 1s linear infinite;"></div>
</div>

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

• 最后在JS里控制这个组件的显示和隐藏，比如页面加载时显示，加载完成后隐藏。这种方式完全在JS层面控制，颜色想怎么改就怎么改，自由度拉满。

3. 利用混合框架的专属API #

如果你用的是React Native、Ionic这类成熟的混合框架，它们通常自带了修改原生组件样式的API，不用自己折腾原生代码：

• React Native：直接给ActivityIndicator组件设置color属性即可：

import { ActivityIndicator } from 'react-native';

// 在组件中使用
<ActivityIndicator size="large" color="#FF5733" />

• Ionic：给ion-loading组件添加自定义CSS类，修改指示器颜色：

.custom-loader .spinner-inner circle {
  stroke: #FF5733; /* 设置指示器的颜色 */
}

然后在JS调用加载组件时指定这个样式类：

const loading = await loadingController.create({
  cssClass: 'custom-loader',
  message: '加载中...',
});
await loading.present();

总结 #

如果想贴近Android主题的全局配置思路，优先试试修改Info.plist设置全局tintColor的方法；如果全局配置受限，或者需要更个性化的样式，自定义JS加载指示器是最稳妥的选择，完全不用碰原生框架。

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