React Native入门-真机调试

方式一：

1.让运行的手机和电脑的WiFi在同一个局域网，获取到电脑的IP地址；

截屏2021-06-17 上午9.16.03.png

2.使用Xcode打开项目,在AppDelegate添加如下代码：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    NSURL *jsCodeLocation;
     jsCodeLocation = [NSURL URLWithString:@"http://10.36.202.76:8082/index.ios.bundle?            platform=ios&dev=true"];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"rnProject1"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
}

3.选择真机，点击Run，完美报错。

终端报错信息如下：

Error: EISDIR: illegal operation on a directory, read
    at Object.readSync (node:fs:720:3)
    at tryReadSync (node:fs:430:20)
    at Object.readFileSync (node:fs:476:19)
    at UnableToResolveError.buildCodeFrameMessage (/Users/mac2021/Desktop/rnProject1/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17)
    at new UnableToResolveError (/Users/mac2021/Desktop/rnProject1/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35)
    at ModuleResolver.resolveDependency (/Users/mac2021/Desktop/rnProject1/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
    at DependencyGraph.resolveDependency (/Users/mac2021/Desktop/rnProject1/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
    at /Users/mac2021/Desktop/rnProject1/node_modules/metro/src/lib/transformHelpers.js:317:42
    at /Users/mac2021/Desktop/rnProject1/node_modules/metro/src/Server.js:1471:14
    at Generator.next (<anonymous>)

手机报错如下：

WechatIMG17.jpeg

尝试多种方法都没有解决，这个坑有点深。

方式二：

1.使用Xcode打开项目，并选择真机运行；

2.Chrome浏览器会自动打开地址：http://localhost:8081/debugger-ui/（若没有打开，请手动打开）

3.查看电脑网络IP,将第三步中的地址改为：http://10.36.202.76:8082/debugger-ui/

截屏2021-06-17 上午9.55.34.png

4.点击Reload app ,终端报错：

warn No apps connected. Sending "reload" to all React Native apps failed. Make sure your app is running in the simulator or on a phone connected via USB.

5.晃动手机，选择Configure Bundler，输入电脑IP和端口：

WechatIMG18.jpeg

进行到此处可以实现手机上热加载修改的代码，在WebStorm上修改RN 代码，保存后即可在手机上看到效果，不用重新运行，如果修改了原生代码，还是需要Run项目的。

在Chrome 上还未实现调试RN 界面布局，可以使用下列方法。

配置环境

1.用WebStorm 打开项目，在控制台输入：npm install -g react-devtools
不幸的是报错了：

npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/react-devtools
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-devtools'
npm ERR!  [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/react-devtools'] {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'mkdir',
npm ERR!   path: '/usr/local/lib/node_modules/react-devtools'
npm ERR! }
npm ERR! 
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR! 
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/mac2021/.npm/_logs/2021-06-17T02_13_24_215Z-debug.log

经过查找资料定位到是权限的问题，重新输入：sudo npm install -g react-devtools ，再输入电脑密码即可成功。

2.启动调试工具：react-devtools ，出现下面界面就说明工具安装成功

截屏2021-06-17 上午10.26.10.png

3.和手机或模拟器建立链接，晃动手机，选择Show Inspector (模拟器：Command + D ,点击Show Inspector )

截屏2021-06-17 上午10.30.23.png