使用GL-REACT-NATIVE+Expo时ph://URL不兼容致图片滤镜报错

问题根源 #

ph://是iOS系统标识照片库资源的特殊协议URI，并非标准网络URL或本地文件路径，gl-react-native的底层图片加载逻辑无法直接识别该协议，因此会触发"unsupported URL"的下载错误。

解决方案：转换URI格式 #

通过Expo FileSystem将ph:// URI转换为gl-react-native可识别的file://本地路径或base64格式，具体实现如下：

1. 安装依赖 #

expo install expo-file-system

2. 修改组件代码 #

import React, { useState, useEffect } from 'react';
import { CreateBar } from '../../components/CreateBar';
import { Container, ImageContainer, FilterText, FilterContainer } from './styles';
import ImageFilters, { Constants } from 'react-native-gl-image-filters';
import { Surface } from 'gl-react-native';
import * as FileSystem from 'expo-file-system';
import { Text, View } from 'react-native';

export function Filters({ navigation, ...rest }: any) {
  const [imageUri, setImageUri] = useState<string | null>(null);

  useEffect(() => {
    const convertPhUri = async () => {
      const phUri = rest.route.params.images[0];
      if (!phUri) return;

      try {
        // 获取照片资源的本地文件信息
        const fileInfo = await FileSystem.getInfoAsync(phUri);
        if (fileInfo.exists) {
          // 转换为file://前缀的本地路径
          setImageUri(`file://${fileInfo.uri}`);
        } else {
          //  fallback：转换为base64格式的data URI
          const base64Data = await FileSystem.readAsStringAsync(phUri, { encoding: 'base64' });
          setImageUri(`data:image/jpeg;base64,${base64Data}`);
        }
      } catch (err) {
        console.error('转换URI失败:', err);
      }
    };

    convertPhUri();
  }, [rest.route.params.images]);

  // 转换完成前显示加载状态
  if (!imageUri) {
    return (
      <Container>
        <Text>加载中...</Text>
      </Container>
    );
  }

  return (
    <Container>
      <CreateBar
        iconName="Filter"
        onPressIcon1={() => navigation.goBack()}
        onPressIcon2={() => console.log('forward')}
      />

      <ImageContainer>
        <Surface style={{ width: '100%', height: '100%' }}>
          <ImageFilters {...Constants.DefaultPresets[10].preset} width={300} height={300}>
            {{ uri: imageUri }}
          </ImageFilters>
        </Surface>
      </ImageContainer>

      <FilterContainer>
        <FilterText>Filter</FilterText>
      </FilterContainer>
    </Container>
  );
}

关键说明 #

• FileSystem.getInfoAsync()：获取ph://资源对应的本地文件路径，添加file://前缀后可被gl-react-native直接识别。
• 备用方案（base64转换）：当本地路径获取失败时，将图片转为base64格式的data URI，这种格式兼容所有图片加载逻辑。
• 异步处理：URI转换是异步操作，需在组件中添加加载状态，避免空值渲染错误。

内容的提问来源于stack exchange，提问作者Nilton Schumacher F