React Native：如何在图片加载完成前保持加载屏显示？

方法一：通过Image.prefetch()预加载图片，延长加载屏显示时机 #

核心思路：拿到Firebase返回的头像URL后，不立即关闭加载屏，先预加载图片，等图片加载完成（或失败）后再隐藏加载屏。

1. 扩展state变量

state = {
  loading: true,
  userInfo: null,
  avatarUrl: '',
};

2. 获取用户信息后预加载头像

import { Image } from 'react-native';

componentDidMount() {
  // 从Firebase拉取用户信息
  firebase.auth().currentUser.then(user => {
    const userInfo = {
      name: user.displayName,
      email: user.email,
      // 其他需要的用户字段
    };
    const avatarUrl = user.photoURL;

    // 先存入用户信息和头像URL
    this.setState({ userInfo, avatarUrl }, () => {
      // 预加载头像图片
      Image.prefetch(this.state.avatarUrl)
        .then(() => {
          // 图片加载成功，关闭加载屏
          this.setState({ loading: false });
        })
        .catch(() => {
          // 加载失败也关闭加载屏，避免卡住
          this.setState({ loading: false });
        });
    });
  });
}

3. 保持原有render逻辑

render() {
  if (this.state.loading) {
    // 替换成你的加载屏组件
    return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>;
  }

  return (
    <View style={{ flex: 1, alignItems: 'center', marginTop: 50 }}>
      <Text>{this.state.userInfo.name}</Text>
      <Text>{this.state.userInfo.email}</Text>
      <Image
        source={{ uri: this.state.avatarUrl }}
        style={{ width: 120, height: 120, borderRadius: 60, marginTop: 20 }}
        // 可选：加载失败时显示本地占位图
        defaultSource={require('./assets/default-avatar.png')}
      />
    </View>
  );
}

方法二：利用Image组件的onLoad事件控制加载屏 #

如果不想用预加载API，可通过Image组件的onLoad事件触发加载屏关闭，需先渲染页面内容但保持加载屏覆盖，直到图片加载完成：

1. 调整state和render逻辑

state = {
  loading: true,
  userInfo: null,
  avatarUrl: '',
  imageLoaded: false,
};

render() {
  // 只要加载未完成或图片没加载好，就显示加载屏
  if (this.state.loading || !this.state.imageLoaded) {
    return <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>;
  }

  return (
    <View style={{ flex: 1, alignItems: 'center', marginTop: 50 }}>
      <Text>{this.state.userInfo.name}</Text>
      <Text>{this.state.userInfo.email}</Text>
      <Image
        source={{ uri: this.state.avatarUrl }}
        style={{ width: 120, height: 120, borderRadius: 60, marginTop: 20 }}
        onLoad={() => this.setState({ imageLoaded: true })}
        onError={() => this.setState({ imageLoaded: true })}
        defaultSource={require('./assets/default-avatar.png')}
      />
    </View>
  );
}

componentDidMount() {
  firebase.auth().currentUser.then(user => {
    const userInfo = { name: user.displayName, email: user.email };
    const avatarUrl = user.photoURL;
    // 拿到信息后先关闭Firebase加载状态，等待图片加载
    this.setState({ userInfo, avatarUrl, loading: false });
  });
}

注意事项 #

• Image.prefetch()会把图片缓存到本地，后续打开时直接读取缓存，提升重复加载速度
• 必须处理图片加载失败的情况，防止加载屏一直显示
• 如果头像URL可能动态变化，需在URL更新时重新触发预加载

内容的提问来源于stack exchange，提问作者Kylan O'Connor