假设在第一次渲染之前，this.state.loading的值是false。
当第一次渲染发生时，this.state.loading ?返回Image组件，onLoadStart被触发，this.state.loading被设置为true。
当第二次渲染发生时，this.state.loading被发现是true，而this.state.loading ?返回DotIndicator组件。在上一次渲染中，Image组件所做的所有努力都丢失了。事实上，Image组件从未出现在该上下文中。
因此，onLoadingEnd永远不会被触发，因为Image组件从未出现在第二个渲染中。
和DotIndicator将永远去轮和轮和轮...等待它失去的爱..

如果loading从一开始就是true，则在图像中不会调用任何内容。
如果loading的值最初是false，则图像不会看到loadStart运行，只会调用load函数和loadEnd函数。
这是因为loadStart函数在开始值为false并且已经渲染时运行。如果开始值为true，则什么也不做，因为它没有绘制图像。
这是一个非常简单的例子，你可以尝试一下：

import React, { Component } from 'react';
import { View, Image } from 'react-native';

export default class App extends Component {
state={
 loading: false,
}
  render() {
    return (
      <View>
      {this.state.loading ? (
                       <Image
          style={{width: 100, height: 100}}
          source={{uri: 'https://facebook.github.io/react-native/img/tiny_logo.png'}}
        />
              ) : (
        <Image
          style={{width: 50, height: 51}}
          onLoadStart={e => this.setState({ loading: true })}
          onLoad={e => alert("onLoad")}
          onLoadEnd={e => alert("onLoadEnd")}
          source={require('@expo/snack-static/react-native-logo.png')}
        />)}
      </View>
    );
  }
}

我最终复制了相同的图像，但将其样式设置为width：1，height：1.这将始终显示但不可见。这允许的是继续设置状态，尽管有许多重新呈现。然后在if语句中有实际的图像或文本组件，将显示未找到的图像。默认情况下NoImageFound设置为true。下面是我的代码

<Image
      source={{ uri: image }}
      style={{ width: 1, height: 1 }}
      onLoadStart={() => setNoImageFound(true)}
      onLoad={() => setNoImageFound(false)}
    />
    {noImageFound ? (
      <View style={{ justifyContent: "center", alignItems: "center" }}>
        <Text style={{ textAlign: "center" }}>No image found</Text>
      </View>
    ) : (
      <View style={styles.icon}>
        <Image source={{ uri: image }} style={styles.image} />
      </View>
    )}

我遇到了这个问题，因为我使用条件来渲染加载屏幕或图像。解决方案是只渲染加载屏幕，并始终返回图像。这里有一个简单的例子，我是如何解决的：

// this does NOT work -- using a conditional to render the image OR the loading screen will prevent "onLoadEnd" from running
const showLoading = isLoading ? <LoadingScreen /> : <Image source={{ uri: imageUrl }} onLoadStart={() => setIsLoading(true)} onLoadEnd={() => setIsLoading(false)} />

// this DOES work -- return the image AND use a conditional only for the loading screen
return (<>
  {isLoading ? <LoadingScreen /> : undefined} // only use the conditional for the loading screen!
  <Image source={{ uri: imageUrl }}  
      onLoadStart={() => setIsLoading(true)}
      onLoadEnd={() => setIsLoading(false)} />
</>)