react-native-wifi-p2p的sendFile与receiveFile功能异常求助

问题背景 #

我开发了一个React Native应用，流程为服务端创建WiFi P2P群组，客户端加入该群组，需实现服务端向客户端传输文件。操作顺序是先在客户端调用receiveFile()，再在服务端调用sendFile()，服务端能打印“You can use the storage”，但客户端始终收不到文件。我们使用react-native-wifi-p2p实现WiFi直连设备间的数据共享，相关代码如下：

发送文件代码 #

onSendFile = () => {
  //const url = '/storage/sdcard0/Music/Rammstein:Amerika.mp3';
  PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE
  )
    .then((granted: any) => {
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('You can use the storage');
      } else {
        console.log('Storage permission denied');
      }
    })
    .then(() => {
      return PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
      );
    })
    .then(() => {
      DocumentPicker.pick({
        presentationStyle: 'fullScreen',
      })
        .then(async (file) => {
          // Send the selected file
          console.log(file[0].uri);
          const filePath = file[0].uri;
          RNFetchBlob.fs
            .readFile(filePath, 'base64')
            .then((data) => {
              sendFile(data);
            })
            .catch((err) => { console.log(err); });
        })
        .catch((err: any) => {
          // Error selecting file
          console.log(err);
        });
      // const response = await DocumentPicker.pick({
      //   presentationStyle: 'fullScreen',
      // });
      // console.log(response[0].uri);
      // return sendFile(response[0].uri)
      //   .then((metaInfo: any) => console.log('File sent successfully', metaInfo))
      //   .catch((err: any) => console.log('Error while file sending', err));
    })
    .catch((err: any) => console.log(err));
};

接收文件代码 #

onReceiveFile = () => {
  PermissionsAndroid.request(
    PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE
  )
    .then((granted: any) => {
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('You can use the storage');
      } else {
        console.log('Storage permission denied');
      }
    })
    .then(() => {
      return PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE
      );
    })
    .then(() => {
      console.log('tag 98');
      // eslint-disable-next-line no-undef
      return receiveFile("/storage/", "test.txt")
        .then((file) => {
          console.log('File received successfully');
          const filePath = `${folder}/${file.name}`
          RNFS.writeFile(filePath, file.data, 'base64')
            .then(() => {
              console.log('File received successfully');
            })
            .catch((err) => {
              console.log(err);
            })
        })
        .catch((err: any) => console.log('Error while file receiving', err));
    })
    .catch((err: any) => {
      console.log("Tag 78" + err);
    });
};

故障排查与修复方案 #

1. 补全sendFile的目标设备参数 #

react-native-wifi-p2p的sendFileAPI需要指定目标设备的MAC地址才能定向传输，原代码仅传入文件数据，导致数据无法找到接收端。修改发送逻辑：

// 先通过onPeersChanged获取已连接的客户端设备地址
let targetDeviceAddress = '';
WifiP2pManager.onPeersChanged((peers) => {
  const connectedClient = peers.find(p => p.status === WifiP2pPeerStatus.CONNECTED);
  if (connectedClient) {
    targetDeviceAddress = connectedClient.deviceAddress;
  }
});

// 发送文件时传入目标设备地址
RNFetchBlob.fs.readFile(filePath, 'base64')
  .then((data) => {
    sendFile(targetDeviceAddress, data, 'test.txt'); // 补充设备地址和文件名
  })

2. 修复接收端未定义变量与路径问题 #

接收端代码中folder变量未定义，且/storage/并非合法可写入目录，需明确具体存储路径并提前创建：

const folder = '/storage/emulated/0/Download'; // Android通用下载目录
// 提前创建目录（若不存在）
RNFS.mkdir(folder)
  .then(() => {
    return receiveFile(folder, 'test.txt')
      .then((file) => {
        const filePath = `${folder}/${file.name}`;
        RNFS.writeFile(filePath, file.data, 'base64')
          .then(() => console.log('文件写入成功'))
          .catch(err => console.log('写入失败:', err));
      });
  });

3. 完善权限请求逻辑 #

Android 10+需申请MANAGE_EXTERNAL_STORAGE权限才能访问外部存储，改用批量请求避免异步链式问题：

const requiredPermissions = [
  PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
  PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
  PermissionsAndroid.PERMISSIONS.MANAGE_EXTERNAL_STORAGE
];

PermissionsAndroid.requestMultiple(requiredPermissions)
  .then((granted) => {
    const allGranted = Object.values(granted).every(val => val === PermissionsAndroid.RESULTS.GRANTED);
    if (!allGranted) {
      console.log('部分存储权限未授权，无法进行文件操作');
      return;
    }
    // 执行文件发送/接收逻辑
  });

4. 添加连接状态监听确保传输时机 #

两端需监听WiFi P2P连接状态，确认设备配对成功后再触发文件传输：

// 服务端监听客户端连接
WifiP2pManager.onConnectionInfoChanged((info) => {
  if (info.groupFormed && info.isGroupOwner) {
    console.log('服务端群组创建完成，等待客户端加入');
  }
});

// 客户端监听服务端连接
WifiP2pManager.onConnectionInfoChanged((info) => {
  if (info.groupFormed && !info.isGroupOwner) {
    console.log('已成功加入服务端群组，可开始接收文件');
    // 此处调用onReceiveFile
  }
});

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