React Native带请求头的Image组件在Android端加载失败问题排查

一、问题原因 #

你遇到的Android端Image组件携带请求头失效的情况，确实是React Native框架的已知bug。Android平台的RN Image组件在处理带自定义请求头（比如Authorization）的source时，存在无法正确传递头信息的问题，社区里有大量同类反馈，和你的情况匹配。

二、Expo项目适配方案（支持图片轮播） #

针对Expo项目，推荐两种可行方案，都能解决问题并轻松实现轮播：

方案1：用Expo官方Image组件替代原生RN Image #

Expo提供的expo-image组件对Android端的请求头支持更完善，能正确携带Token，还自带缓存、加载状态管理，性能也更优。

步骤：

1. 安装依赖

npx expo install expo-image

2. 改造你的图片组件

import React, { useEffect, useState } from "react";
import { View } from "react-native";
import { Image as ExpoImage } from "expo-image";
import { getAuth } from "../services/auth/auth.js";

const ImageWithToken = ({ imageType, uri, defaultImage, ...rest }) => {
  const [authHeaders, setAuthHeaders] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      const tok = await getAuth();
      // 加个重试限制，避免无限递归
      if (!tok) {
        setTimeout(fetchToken, 1000);
        return;
      }
      setAuthHeaders({ Authorization: `Bearer ${tok.access_token}` });
    };
    fetchToken();
  }, []);

  // 没有头信息且没有默认图时返回空
  if (!authHeaders && !defaultImage) return null;

  const renderImageContent = () => {
    // 无目标uri时直接返回默认图
    if (!uri) {
      if (imageType === "imageBackground") {
        return (
          <View style={{ width: '100%', height: '100%' }}>
            <ExpoImage source={defaultImage} style={{ width: '100%', height: '100%' }} {...rest} />
          </View>
        );
      }
      return <ExpoImage source={defaultImage} {...rest} />;
    }

    const imageSource = { uri, headers: authHeaders };
    // Expo没有原生ImageBackground，用View嵌套模拟
    if (imageType === "imageBackground") {
      return (
        <View style={{ position: 'relative', width: '100%', height: '100%' }}>
          <ExpoImage source={imageSource} style={{ width: '100%', height: '100%' }} {...rest} />
          {/* 这里可以放背景上的文本/组件 */}
        </View>
      );
    }
    return <ExpoImage source={imageSource} {...rest} />;
  };

  return renderImageContent();
};

export default ImageWithToken;

3. 集成图片轮播
   用Expo官方的expo-swiper组件实现轮播，安装后直接把改造后的ImageWithToken作为轮播项：

npx expo install expo-swiper

使用示例：

import { Swiper } from 'expo-swiper';

const ImageCarousel = ({ imageList }) => {
  return (
    <Swiper style={{ height: 250 }}>
      {imageList.map((imgUri, index) => (
        <ImageWithToken
          key={index}
          uri={imgUri}
          defaultImage={require('./assets/default-image.jpg')}
          style={{ width: '100%', height: '100%' }}
        />
      ))}
    </Swiper>
  );
};

方案2：转Base64加载（适合小图场景） #

如果图片尺寸较小，可先通过Fetch API携带Token请求图片，把返回的Blob转成Base64格式，再传给Image组件。这种方式绕开了RN Image的请求头bug，全平台兼容。

示例代码：

import React, { useEffect, useState } from "react";
import { Image, ImageBackground } from "react-native";
import { getAuth } from "../services/auth/auth.js";

const ImageWithToken = ({ imageType, uri, defaultImage, ...rest }) => {
  const [imageUri, setImageUri] = useState(null);

  useEffect(() => {
    const fetchImageToBase64 = async () => {
      const tok = await getAuth();
      if (!tok) {
        setTimeout(fetchImageToBase64, 1000);
        return;
      }
      try {
        const res = await fetch(uri, {
          headers: { Authorization: `Bearer ${tok.access_token}` },
        });
        const blob = await res.blob();
        const reader = new FileReader();
        reader.onloadend = () => setImageUri(reader.result);
        reader.readAsDataURL(blob);
      } catch (err) {
        console.error('图片加载失败:', err);
        setImageUri(defaultImage);
      }
    };

    if (uri) fetchImageToBase64();
    else setImageUri(defaultImage);
  }, [uri]);

  if (!imageUri) return null;

  return imageType === "imageBackground" ? (
    <ImageBackground source={{ uri: imageUri }} {...rest} />
  ) : (
    <Image source={{ uri: imageUri }} {...rest} />
  );
};

export default ImageWithToken;

轮播集成同样用expo-swiper，和方案1一致。

注意点 #

• 优先选方案1，expo-image性能更好，适合大图或多图场景；
• 方案2的Base64转换会占用更多内存，不建议用于高清大图；
• 获取Token的重试逻辑要加延时或次数限制，避免无限循环。

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