Question

他正在尝试加载远程图像。 onLoadStart命中，但onLoadEnd却没有

<View style={{ paddingTop: 60, paddingBottom: 10 }}>
              {this.state.loading ? (
                <DotIndicator size={25} color={"white"} />
              ) : (
                <Image
                  resizeMode={this.resizeMode}
                  style={[styles.imageStyle, this.tintStyle]}
                  onLoadStart={e => {
                    this.setState({ loading: true });
                  }}
                  onLoadEnd={e => this.setState({ loading: false })}
                  // defaultSource={NoProfile}
                  //  loadingIndicatorSource={require("@images/profile_placeholder.png")}
                  source={this.userImageUri}
                  onError={error => {
                    this.tintStyle = { tintColor: "lightgray" };
                    this.resizeMode = "contain";
                    this.userImageUri = NoProfile;
                  }}
                />
              )}
            </View>

`

编辑1

onLoadStart 被点击。 onLoad 也从未被调用

任何人都有线索吗？是新来的反应。任何帮助表示赞赏。谢谢，谢谢

解决方案

由于Vignesh和hong提到图像永远不会存在，因此它在loadEnd上将永远不会被调用。因此，我不只加载图像或加载器，而是将加载器加载到图像之上。将其发布在这里，因为它有时可能对某人有用。再次感谢Vignesh和hong

<View
              style={{
                padding: 10,
                width: WIDTH - 50,
                height: WIDTH - 25,
                alignSelf: "center"
              }}
            >
              {this.state.loading ? (
                <MaterialIndicator
                  size={50}
                  color={"red"}
                  style={{
                    marginTop: WIDTH / 2,
                    alignSelf: "center"
                  }}
                />
              ) : null}
              <Image
                resizeMode={this.resizeMode}
                style={[styles.imageStyle, this.tintStyle]}
                onLoadStart={e => {
                  this.setState({ loading: true });
                }}
                onLoad={e => {
                  this.setState({ loading: false });
                }}
                onLoadEnd={e => this.setState({ loading: false })}
                // defaultSource={NoProfile}
                //  loadingIndicatorSource={require("@images/profile_placeholder.png")}
                source={this.userImageUri}
                onError={error => {
                  this.tintStyle = { tintColor: "lightgray" };
                  this.resizeMode = "contain";
                  this.userImageUri = NoProfile;
                }}
              />
            </View>

Answer 1

比方说，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将会永远绕下去……等待着失去的爱情。

Answer 2

如果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>
    );
  }
}

未在本机图像中触发onLoadEnd

2 个答案: