React Native之iOS远程真机调试

本文章描述如何在真机环境上远程调试js代码,有一些开发工作(如支付测试)是需要在真机环境上才具备测试条件的,本文所述的方法,对于这类环境来说,非常有帮助。

方法其实很简单.

一、AppDelegate.m

只需要在AppDelegate.m文件中,把jsCodeLocation改为以下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
NSURL *jsCodeLocation;
#ifdef DEBUG // 动态加载
#if (TARGET_OS_SIMULATOR) // 模拟器
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else // 真机测试
jsCodeLocation = [NSURL URLWithString:@"http://<REMOTE_HOST>:8081/index.bundle?platform=ios&dev=true&minify=false"];
#endif
#else
// 静态加载
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
// ... more ...
}

如果以DEBUG进行编译时:

  • 在模拟器上运行时,还是走原来的方式
  • 在真机环境运行时,从<REMOTE_HOST>:8081这个地址上加载js

如果以非DEBUG进行编译时:

  • 还是默认走回从main.jsbundle文件加载的方式

其中,<REMOTE_HOST>:8081一定是要从手机上可以访问的地址。

二、配置允许从http不安全访问

由于iOS安全限制,默认不允许使用http(而必须使用https),由于我们这是调试,有需要的可针对性的放开。

参考以下配置进行配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>link****.com</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>


三、扩展阅读

使用frp来将本地的端口映射至公网服务器的端口上。

由于在公司网络环境的限制,WiFi环境的手机不能访问得到内网环境暴露的端口,因此,需要把内网的端口映射到公网环境。

简单的配置方法:

1)公网服务器配置

1
2
3
4
wget https://github.com/fatedier/frp/releases/download/v0.26.0/frp_0.26.0_linux_amd64.tar.gz
tar xvf frp_0.26.0_linux_amd64.tar.gz
cd frp_0.26.0_linux_amd64
setsid ./frps -c ./frps.ini >frps.log 2>&1

2)内网客户端配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 前提条件:下载frp,并解压至 ~/Downloads/frp_0.16.0_darwin_amd64
cd ~/Downloads/frp_0.16.0_darwin_amd64

cat <<EOF > frpc-rn-me.ini
[common]
server_addr = link****.com
server_port = 7000
# auth token
token = ******** // 访问TOKEN,不要随意告诉别人哦~

[rn-8081]
type = tcp
local_ip = 127.0.0.1
local_port = 8081
remote_port = 8081
EOF
./frpc -c ./frpc-rn-me.ini

这样子运行起来之后,就可以随时随地地对iOS真机远程调试了(JS)。