onLoadEnd 不会在 react-native Image 中触发

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 提到图像永远不会存在，因此永远不会调用它的 on 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将永远一圈又一圈......等待它失去的爱......