React Native中访问以点开头的文件夹返回空数组的解决方法

问题现象 #

使用rn-fetch-blob包的fs.ls接口读取WhatsApp.statuses隐藏文件夹时，传入正确路径返回空数组，无法获取目录内文件；将文件夹重命名为去掉.前缀的statuses后，可正常读取到目录内的图片文件，返回结果如下：

data =>  ["IMG-20201015-WA0003.jpg", "IMG-20201015-WA0002.jpg"]

异常场景的实现代码：

RNFetchBlob.fs
    .ls(`${dirs.SDCardDir}/Android/media/com.whatsapp/WhatsApp/Media/.statuses`)
    .then(data => {
      console.log('data => ', data);
    })
    .catch(error => {
      console.log(error);
    });

问题根因 #

• Android系统默认将名称以.开头的文件、文件夹识别为隐藏项，rn-fetch-blob的fs.ls接口默认配置下会自动过滤所有隐藏条目，不会返回隐藏目录下的内容，也不会把隐藏文件列入遍历结果。
• 重命名文件夹去掉.前缀后，目录不再属于隐藏项，因此可以被正常遍历，这也说明应用已经拿到了对应路径的存储访问权限，不存在权限缺失问题。

修复方案 #

直接给fs.ls方法传入第二个布尔参数true，开启隐藏条目遍历能力即可，修改后的代码如下：

RNFetchBlob.fs
    // 第二个参数传入true，强制遍历包含隐藏项在内的所有目录内容
    .ls(`${dirs.SDCardDir}/Android/media/com.whatsapp/WhatsApp/Media/.statuses`, true)
    .then(data => {
      console.log('data => ', data);
    })
    .catch(error => {
      console.log(error);
    });

兼容处理 #

如果传入参数后仍然返回空数组，先做两步校验：

• 检查当前使用的rn-fetch-blob版本，ls接口的隐藏项遍历参数在v0.12.0及以上版本才支持，版本过低请先升级依赖。
• 调用fs.exists接口校验目标路径是否能被SDK正确识别，避免路径拼接时出现转义错误：

const targetPath = `${dirs.SDCardDir}/Android/media/com.whatsapp/WhatsApp/Media/.statuses`;
const pathExist = await RNFetchBlob.fs.exists(targetPath);
// 如果pathExist返回false，可尝试手动拼接全路径，不要使用模板字符串隐式转换

注意：不要通过修改.statuses目录名的方式解决问题，该目录是WhatsApp预定义的状态资源存储目录，改名会导致WhatsApp无法正常读写状态相关的媒体文件。

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