React Native（Expo XDE）中WebView组件renderError持续触发问题求助

嘿，我一眼就看到问题出在哪了！你现在的代码里，renderError属性直接写了alert('Erreur', 'Internet non disponible')——这会导致组件一渲染就立刻执行alert，而不是等到WebView真的加载出错时才触发。

问题根源 #

在React Native中，renderError需要接收一个回调函数，当WebView发生加载错误时才会调用这个函数。但你现在的写法是直接执行了alert函数，相当于把alert的返回值（其实是undefined）传给了renderError，同时在组件初始化阶段就弹出了提示，看起来像是renderError一直在触发。

修复方案 #

把renderError改成一个箭头函数，这样只有当错误发生时才会执行alert。另外注意，React Native里推荐用Alert.alert()而不是原生的alert()，记得先导入Alert组件：

import React from 'react';
import { StyleSheet, Text, View, WebView, Alert } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <WebView 
        source={{uri: 'https://lapommeculturelle.com'}} 
        // 用箭头函数包裹Alert.alert调用，确保仅在错误发生时执行
        renderError={() => Alert.alert('Erreur', 'Internet non disponible')} 
      />
    );
  }
}

额外调试技巧 #

如果想知道具体是什么错误导致的，可以在renderError的回调里接收error参数，打印出来看看：

renderError={(error) => {
  console.log('WebView加载错误详情:', error);
  Alert.alert('Erreur', 'Internet non disponible');
}}

这样你就能在Expo的调试控制台里看到具体的错误信息，方便进一步排查问题~

内容的提问来源于stack exchange，提问作者Jérémie DEMANGE