React Native中如何自定义WebView默认加载指示器样式？

你搞错了startInLoadingState属性的用法——它是个布尔值，作用是控制WebView是否在初始状态就显示加载界面，不是用来直接传入自定义加载组件的，所以你直接把ActivityIndicator赋值给它肯定不会生效。

正确的做法是结合两个属性实现需求：

• startInLoadingState={true}：开启初始加载状态
• renderLoading()：通过这个方法返回你自定义的加载指示器组件

完整的代码示例如下：

import { WebView, ActivityIndicator, Dimensions, StyleSheet } from 'react-native';

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

// 组件内部代码
<WebView
  source={{ uri: this.state.url }}
  startInLoadingState={true}
  renderLoading={() => (
    <ActivityIndicator
      style={styles.loader}
      color={Color.white}
      size="large"
    />
  )}
/>

// 样式抽离，更易维护
const styles = StyleSheet.create({
  loader: {
    backgroundColor: 'transparent',
    position: 'absolute',
    left: width * 0.35,
    top: height / 2 - 50,
    zIndex: 9,
    height: width * 0.3,
    width: width * 0.3,
    borderRadius: 20
  }
});

额外注意事项：

• 确保已经通过Dimensions正确获取了屏幕的宽高值，否则样式中的百分比计算会失效
• 如果你使用的Color是自定义全局变量，要确认它已正确导入或定义

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