React Native中WebView加载完成后ActivityIndicator不消失问题排查

• 核心问题是你将WebView放在了宽高均为0的容器内，React Native不会渲染尺寸为0的组件，因此WebView不会实际发起页面加载，onLoad回调永远不会触发，ok状态一直为false，导致ActivityIndicator持续显示。
• 代码中冗余的Cat组件存在递归返回自身的问题，一旦被调用会直接触发栈溢出，建议直接删除该无效组件。
• onLoad回调中打印ok拿到的是更新前的旧值，属于React状态异步更新的正常表现，不影响功能运行。

修复后的代码 #

import React,{useState} from 'react';
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native';
import { WebView } from 'react-native-webview';

const Cafe = () => {
  const [ok, setOk] = useState(false);
  return (
      ok ?
      <Text>Hello, I am your cat!</Text>
      :
    <View style={styles.container}>
      {/* 调整隐藏WebView的实现方式，避免宽高为0导致不触发加载 */}
      <View style={{position: 'absolute', left: -10000, width: 1, height: 1}}>
        <WebView
          source={{uri: "https://www.google.com/"}}
          onLoad={() => {
            setOk(true)
          }}
        />
      </View>
      <ActivityIndicator size="large" color="#E60081"/>
    </View>
);
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default Cafe;

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