Expo中WebView加载时ActivityIndicator持续显示问题求助

安全阿岳

2026-7-21

WebView回调不触发导致ActivityIndicator一直加载的解决方法

你的核心问题是条件渲染导致WebView从未被挂载——当isLoading为true时，页面只渲染了ActivityIndicator，WebView根本没出现在DOM树里，自然无法触发它的onLoadStart、onLoadEnd等回调，最终陷入isLoading一直为true的死循环。

解决步骤

取消条件渲染逻辑，让WebView始终保持挂载状态
将ActivityIndicator作为加载遮罩层，叠加在WebView上方，通过isLoading控制其显示/隐藏

修改后的代码示例

<Modal isVisible={modalVisible} animationIn="slideInUp" animationOut="slideOutDown">
  <View style={styles.modalContainer}>
    <View style={styles.modalTitleBar}>
      <Text style={styles.modalTitle}>Modal Title</Text>
      <TouchableOpacity onPress={closeModal} style={styles.closeButton}>
        <MaterialIcons name="close" size={24} color="white" />
      </TouchableOpacity>
    </View>
    {/* 始终渲染WebView，保证回调能正常触发 */}
    <WebView
      source={{ uri: selectedLink }}
      onLoadStart={handleLoadStart}
      onLoadEnd={handleLoadEnd}
      onNavigationStateChange={handleNavigationStateChange}
      style={styles.webView}
    />
    {/* 加载遮罩层，根据isLoading状态切换显示 */}
    {isLoading && (
      <View style={styles.loadingOverlay}>
        <ActivityIndicator size="large" color="indigo" />
      </View>
    )}
  </View>
</Modal>

补充样式定义

const styles = StyleSheet.create({
  // 保留你原有样式，新增以下遮罩样式
  loadingOverlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(255,255,255,0.8)',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 10,
  },
});