React Native 插曲 iOS真机调试(失败解决)

作者: 朱_源浩 | 来源:发表于2016-08-18 17:08 被阅读2257次

    这几天,打算把之前集合到原生项目中的React Native项目在真机上跑跑,顺便试下发布更新等,理清以后的发布流程。。。结果,就一直卡在真机调试上了,明明在网络上一堆,都是超简单的替换localhost就行。。结果结果,试了好久,终于解决了。

    正常方案(React Native 0.29.0之前版本)

    首先,你要让调试用电脑和你的手机必须处于相同的 WiFi 网络中下

    1. 打开 iOS 项目的 AppDelegate.m 文件

    2. 更改 jsCodeLocation 中的 localhost 改成你电脑的局域网IP地址(查看IP地址:点击设置->网络->就可以看到本机IP)

    NSURL *jsCodeLocation;
    jsCodeLocation = [NSURL URLWithString: @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    //
    //  将localhost换成局域网中主机Mac的IP地址
    jsCodeLocation = [NSURL URLWithString: @"http://10.10.10.60:8081/index.ios.bundle?platform=ios&dev=true"];
    
    1. 在 Xcode 中,选择你的手机作为目标设备,Run 即可

    可以通过晃动设备来打开开发菜单(重载、调试等)

    然后发觉,我试了n久,一直失败,提示无连接到服务器。
    感觉这个方法在iOS9之前应该都是可以成功的。
    原因如下:
    Google后查证,iOS9引入了新特性App Transport Security (ATS)。详情:App Transport Security (ATS)
    新特性要求App内访问的网络必须使用HTTPS协议。
    (下文提供解决方案)

    React Native 0.29.0之后版本方案

    React Native iOS在0.29.0版本中BundleURL加载方法做了重大改变,新增了RCTBundleURLProvider单例类专门处理BundleURL,使用NSUserDefaults保存配置信息。

    默认加载方式

    Debug模式下,执行react-native-xcode.sh编译脚本会自动获取当前网卡en0的IP地址,并打入App包中一个配置文件ip.txt,App运行时会读取ip文件,自动生成Developer Server URL,通过这种加载方式,我们不再需要手动去把”localhost”改成Mac的IP了,每次编译都会读取当前最新的IP。

    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    

    手动设置IP

    RCTBundleURLProvider在接口中暴露了jsLocation属性,可以通过setJsLocation手动设置IP。(如果只是本地调试的话,其实没有必要手动设置哈,因为默认加载方式就回读取当前最新的IP)

    //  调用前先设置IP
    [[RCTBundleURLProvider sharedSettings] setJsLocation:@”10.10.10.60”];
    

    App Transport Security 设置

    上面两种不同的方案主要是针对React Native不同版本做的区分,,推荐使用第二种方案,比较简单直接。
    不过如果是iOS9的话,估计上面的方案均没有让你真的调试成功,原因在于:
    iOS9引入了新特性App Transport Security (ATS)。详情:App Transport Security (ATS)
    新特性要求App内访问的网络必须使用HTTPS协议。(如果直接用IP地址发出http请求失败的话大多数原因也是这个,同下解决办法)

    解决办法:
    需要在Info设置NSAppTransportSecurity的NSAllowsArbitraryLoads为true

    <key>NSAppTransportSecurity</key>
        <dict>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
        </dict>
    

    效果如下:


    NSAppTransportSecurity设置.png

    花费了几天的时间弄真机测试和打包更新,因为网上查到的资料大多是以前的,而NSAppTransportSecurity又是iOS9的新特性,这个真的很重要哈,所以就作为一个插曲插进原本有规划的写作,分享下,希望读者不用走这歪路。。。如果还是调试失败的话欢迎留言讨论下哈哈。

    相关文章

      网友评论

      • 一亩三分甜:你好,我是装的RN版本0.44.3,采用React Native集成到原生的方式,嵌套RN,连接别人电脑的IP地址,无法调起调式菜单?

      本文标题:React Native 插曲 iOS真机调试(失败解决)

      本文链接:https://www.haomeiwen.com/subject/woresttx.html