React Native快速刷新（FastRefresh）无法工作

Jun 3, 2023

在使用React Native开发过程中，可能会遇到一些奇怪的问题，比如快速刷新无法工作或者Axios可以发送请求但是无法进入回调函数。今天我来分享一下我遇到这些问题的解决方法。

问题1：快速刷新无法工作

首先，我们需要确认开发菜单是否开启了快速刷新功能。如果没有开启，可以通过以下步骤打开：

如果开启了快速刷新功能但是仍然无法工作，那么可能是以下原因导致的：

Babel的配置问题。如果你安装了mobx并按照官网的要求配置了Babel，但是忽略了Babel的版本，就可能会导致快速刷新无法工作。Babel大于7.13.0的正确配置应该是：

{
    "plugins": [["@babel/plugin-proposal-class-properties"]],
    "assumptions": {
        "setPublicClassFields": false
    }
}

如果你是小于7.13.0，那么应该如下配置：

{
  "plugins": [["@babel/plugin-proposal-class-properties", { "loose": false }]],
}

package.json中的resolutions配置项。如果你在package.json中添加了resolutions配置项，可能会导致快速刷新无法工作。可以尝试删除该配置项并重新安装依赖。

问题2：Axios可以发送请求但是无法进入回调函数

如果你遇到这个问题，可以先检查一下Axios的使用方法是否正确。正确的使用方法应该是这样的：

axios.get('/api/user')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

如果使用方法没有问题，那么可能是以下原因导致的：

Babel的配置问题。和快速刷新无法工作的问题一样，Babel的配置也可能会导致Axios无法进入回调函数。请确保你的Babel配置正确。
tsconfig.json中的compilerOptions选项。如果你在tsconfig.json中添加了compilerOptions选项，并且覆盖了@tsconfig/react-native/tsconfig.json中的正确配置项，就可能会导致Axios无法进入回调函数。正确的compilerOptions应该是这样的：

{
  "extends": "@tsconfig/react-native/tsconfig.json",
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

总结

在React Native开发过程中遇到问题是很正常的，但是只要认真排查，就一定能够找到解决方法。实在不行就使用排除法，先把依赖还原至简，逐个排查，总有收获！