React Native在真機運行（IOS）

jeyhan 發布于2019-08-22 16:22 / 898人閱讀

摘要：真機在線運行打開，項目的目錄如果之前在模擬器調試過，換成真機運行的時候務必關閉模擬器需要修改的配置修改為如果上來就運行的話，會報錯改完界面處選擇修改如下確認目標設備的系統版本一致同樣也要確認測試用例項目下的配置打開文件值改為打開文件修改的引

真機在線運行

打開Xcode，open項目的ios目錄；

如果之前在模擬器調試過，換成真機運行的時候務必關閉模擬器；

需要修改的配置：

Bundle Identifier 修改為： com.soho3q

如果上來就運行的話，會報錯：

改完界面：

target處選擇Test

修改如下:

確認目標設備的系統版本一致：

同樣也要確認Tests測試用例項目下的配置：

打開Info.plist文件；

值改為YES；

打開AppDelegate.m文件；修改jsCodeLocation 的引用位置為我們添加進來的jsbundle；
修改為：

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"/main.ios" withExtension:@"jsbundle"];

目前為止配置的基本差不多了，這個時候可以點運行試試，但極有可能會出現以下錯誤：

好像是類庫導入的問題；
查看到報錯的文件位置：

是在測試用例下類庫缺失；

解決辦法：

target選擇測試；

找到Build Phases，新增資源庫；

新增：

解決完上邊問題，再次 CMD + R 運行，如果運行成功，即可在手機上看到模擬器運行時同樣界面；

真機離線運行

離線運行需要打包后把jsbundle添加到項目中；同時，xcode中需要修改下配置；

打開 RCTWebSocketExecutor.m 文件：

文件中找到localhost，替換為你的IP；

新建打包命令：

react-native bundle --entry-file index.js --bundle-output ./ios/bundle/main.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false

在ios目錄下新建一個bundle文件夾，用于存放打包完的main.ios.jsbundle 和assets文件；

或者直接在package.json 中添加命令：

    "bundle-ios": "react-native bundle --entry-file index.js --bundle-output ./ios/bundle/main.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false"

接下來運行打包命令；

npm run bundle-ios

輸出jsbudle后在Xcode中添加進去；

直接拖進去，

選擇此項

再次運行，如果順利，即可成功打一個離線包，裝到手機上；

離線包模式下開啟Chrome調試會很慢，甚至load不出來；所以可以打Release包;
具體設置： Product > Scheme > Edit Scheme 
選擇Relesase

這種版本不會出現紅屏報錯；

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94298.html

在真機和模擬器中使用 devtools 調試（iOS Web版）

摘要：谷歌和蘋果分別提供了各自方案，來幫助開發者使用開發者工具調試真機或模式器的頁面。這極大的提高了調試效率。本文介紹了蘋果提供的在真機和模擬器中使用調試方法。真機調試一準備需要一臺。需要一臺在測試序列號中的手機。開發 Web 頁面時，難免會碰到一些特定機型、特定版本或者是嵌到 App 中才會出現的問題。碰到這類問題時，如果不能使用開發者工具 devtools，這意味著，你只能使用 ale...

developerworks 2019-08-22 11:20 評論0 收藏0
ReactNative&weex&DeviceOne對比

摘要：平臺要求基本都是以上需擴展不支持已支持。性能重心比較多，目前性能關注不多。成立也比較晚，案例也有一些，基本都是近一年內的案例。較晚，以公司自己人居多，成熟需一段時間。較晚，社區人相對少一些，內容相對成熟。　　React Native出來有一段時間了，國內的weex和deviceone是近期發布的，我可以說從2011年就開始關注快速開發的跨平臺平臺技術了，接觸過phoneGap、數字天...

helloworldcoding 2019-08-21 10:56 評論0 收藏0
React Native基礎&入門教程：調試React Native應用的一小步

摘要：這也成為了一些開發者跨入移動開發大門的第一道小門檻。目前已經知道了調試設置中和。 React Native(以下簡稱RN)為傳統前端開發者打開了一扇新的大門。其中，使用瀏覽器的調試工具去Debug移動端的代碼，無疑是最吸引開發人員的特性之一。試想一下，當你在手機屏幕按下一個按鈕，處理事件的代碼就可以立即在瀏覽器的調試工具里進行斷點調試，而且每當你對代碼進行修改，界面便可以完成快速地重...

NickZhou 2019-08-26 11:58 評論0 收藏0