windows平台react-native搭建开发环境踩坑记录（could not connect to development server）

小鱼儿 2022-02-17 11:11 48阅读 0赞

# 错误原因 #

从错误信息我们可以得知，无法加载代码，引起这个错误的原因有很多，例如没有启动包服务器，手机和电脑的WIFI环境不一致，Node版本落后等都有可能。因此需要我们一步一步地去排查。

# 排查步骤 #

1.  **首先检查自己环境配置和搭建的步骤是否正确，环境变量是否配置，详细的配置步骤请参考 [react-native官网][react-native]**
2.  **检查包服务器是否运行，若没有则运行`npm start`**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70]
3.  **运行`react-native run-android` ，项目默认启动服务器的端口为8081，首先检查端口是否被占用。我就是被这个坑给坑惨了，我们公司内部安装的杀毒软件占用了这个端口，但包服务器却成功启动，没有任何端口占用的信息报错，这导致我一直以为不是端口的问题，最后排查了好久才发现。端口如果被占用，可参考[这篇文章][Link 1]修改端口，注意安卓机的端口也需要跟随修改，可以参考[这篇文章][Link 2]**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70 1]
4.  **检查安卓机的USB调试模式是否打开，可参考[这篇文章][Link 3]**
5.  **运行`adb devices`，检查设备是否正确连接。若为真机，检查手机和电脑的WIFI是否在同一网络环境**  
    ![在这里插入图片描述][20190419152658509.png]
6.  **检查node的版本是否落后**
7.  **修改IP地址，参考[官网][Link 2]**\*\*

[react-native]: https://reactnative.cn/docs/getting-started/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70]: /images/20220217/6be24a81219e487f8e03c42c57a345bd.png
[Link 1]: http://www.devio.org/2017/08/18/Modify-the-React-Native-listening-port/
[Link 2]: https://reactnative.cn/docs/running-on-device/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70 1]: /images/20220217/8c301e86340a49ba8b4f0d572007a510.png
[Link 3]: https://jingyan.baidu.com/article/574c521961b8b66c8c9dc16b.html
[20190419152658509.png]: /images/20220217/43e0eec9af004db6a1c3155b7459be1a.png