React Native中如何将react-native-fetch-blob下载的文件路径转为URI？

嘿，刚好我对这个场景很熟悉！你现在用res.path()拿到的是本地文件系统的绝对路径，但React Native的组件（比如Image）需要的是符合平台规范的URI格式，别担心，有两种简单的办法搞定：

方法一：直接用RNFetchBlob内置的res.uri（推荐） #

其实RNFetchBlob已经帮你处理好了跨平台的URI转换，你不需要手动拼接前缀，直接用res.uri代替res.path()就行，它会自动返回对应平台的正确URI格式：

downloadFile = () => {
  RNFetchBlob.config({ fileCache: true })
  .fetch('GET', 'https://static.standard.co.uk/s3fs-public/thumbnails/image/2016/05/22/11/davidbeckham.jpg?w968', {})
  .then((res) => {
    // 直接使用res.uri，无需手动转换
    this.setState({ avatarSource: { uri: res.uri } })
  })
}

这个方法最省心，因为它自动适配了Android和iOS的差异，不用你写平台判断逻辑。

方法二：手动拼接URI前缀（按需使用） #

如果你想自己控制转换逻辑，也可以根据平台手动处理：

• Android平台：需要给本地路径加上file://前缀，比如：

  const androidUri = `file://${res.path()}`
  

• iOS平台：直接使用res.path()即可，或者加上file://前缀也能被识别，两种写法都没问题：

  const iosUri = res.path() // 或者 `file://${res.path()}`
  

要是需要跨平台兼容，你可以结合Platform API来判断：

import { Platform } from 'react-native';

// ...

.then((res) => {
  let fileUri;
  if (Platform.OS === 'android') {
    fileUri = `file://${res.path()}`;
  } else {
    fileUri = res.path();
  }
  this.setState({ avatarSource: { uri: fileUri } })
})

不过还是更推荐第一种方法，毕竟res.uri是官方封装好的，不会出错。

内容的提问来源于stack exchange，提问作者Wai Yan Hein