如何解决expo-image-picker的URI在react-native-expo-image-cache中失效问题？

我使用expo-image-picker @13.3.1获取图片URI后，发现该URI无法在react-native-expo-image-cache @4.1.0的<CachedAvatar>组件中正常显示，但在React Native默认的<Image>组件（<Image source={{ uri: image }}>）里可以正常工作。

相关代码片段 #

class SignUpForm extends React.Component {
  state = {
    name: "",
    surname: "",
    email: "",
    password: "",
    image: Asset.fromModule(require("../../assets/avatar_default.png")).uri,
    key: 1,
    errorMessage: null
  }

  pickImage = async () => {
    const { granted } = await ImagePicker.requestCameraPermissionsAsync()
    if (!granted) {
      return;
    }
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });

    if (!result.cancelled) {
      console.log(result.uri);

      this.setState({image: result.uri});
      this.setState({key: this.state.key + 1});
    }
  };

  render() {
    const { navigation }  = this.props;
    return(
      // ...其他代码
      <ChachedAvatar 
        resizeMode="cover"
        transitionDuration={900}
        tint="dark"
        preview={Asset.fromModule(require("../../assets/avatar_default.png")).uri}
        uri={this.state.image}
        key={this.state.key}
      />
      // ...其他代码
    )
  }
};

日志输出 #

• ImagePicker获取的无效URI：

  file:///Users/timokurtz/Library/Developer/CoreSimulator/Devices/F3B4F1EA-A039-4D48-BDA2-4158D628F9A1/data/Containers/Data/Application/0C4C55A2-F1B8-4991-AEEC-1FA7545C68FE/Library/Caches/ExponentExperienceData/%2540anonymous%252Fcoresoil-0e17f581-c238-4031-b1f8-cfb662e245e1/ImagePicker/8EAE216A-BA81-434A-A4FA-D1472CAA731E.jpg
  

• 本地资源的有效URI：

  http://192.168.178.20:19000/assets/assets/avatar_default.png?platform=ios&hash=ebb0aa5f6d1badea222fee12bb599a1e?platform=ios&dev=true&hot=false
  

解决方案 #

1. 核心原因

react-native-expo-image-cache的<CachedAvatar>组件主要设计用于处理远程HTTP/HTTPS URL的图片缓存，对本地file://协议的URI支持有限——它的缓存逻辑依赖网络请求流程，无法直接解析本地文件路径。

2. 具体解决方法

将ImagePicker获取的本地图片转换为Base64格式，再传递给<CachedAvatar>组件：

修改pickImage方法，添加base64: true选项获取图片的Base64编码，然后构造Base64格式的URI：

pickImage = async () => {
  const { granted } = await ImagePicker.requestCameraPermissionsAsync()
  if (!granted) {
    return;
  }
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.All,
    allowsEditing: true,
    aspect: [1, 1],
    quality: 1,
    base64: true, // 新增选项，获取Base64编码
  });

  if (!result.cancelled) {
    // 构造Base64格式的URI
    const base64Uri = `data:image/jpeg;base64,${result.base64}`;
    this.setState({ image: base64Uri });
    this.setState({ key: this.state.key + 1 });
  }
};

3. 额外检查

代码中存在组件名称拼写错误：<ChachedAvatar>应为<CachedAvatar>，笔误会导致组件无法正常识别渲染，请及时修正。

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