React Native 真機調試

iOS 真機調試

方法一：（從設備訪問開發服務器）

首先，你的筆記本電腦和你的手機必須處於相同的 wifi 網絡中。

打開 iOS 項目的 AppDelegate.m 文件

更改 jsCodeLocation 中的 localhost 改爲你電腦的局域網IP地址

在 Xcode 中，選擇你的手機做爲目標設備，Run 便可

能夠經過晃動設備來打開開發菜單(重載、調試等)

方法二：（使用離線包）

你也能夠將應用程序自己的全部 JavaScript 代碼打包。這樣你能夠在開發服務器沒有運行時測試它，並把應用程序提交到到 AppStore。

1. 打開 iOS / AppDelegate.m

2. 遵循「選項 2」的說明：

• 取消 jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

• 在你應用程序的根目錄的終端運行給定 curl 命令 （$ curl 'http://localhost:8081/Game2048.bundle?platform=ios' -o main.jsbundle ）//此時應該先在本地啓動服務

• //打包項目的根目錄下的 js 文件到 main.jsbundle (能夠直接使用上述 curl 方法打包 javascript 便可)  $ react-native bundle [--minify]

Packager 支持幾個選項：

• dev(默認的 true)——設置了 __DEV__ 變量的值。當是 true 時，它會打開一堆有用的警告。對於產品，它建議使用 dev = false。

• minify(默認的 false)——只要不經過 UglifyJS 傳輸 JS 代碼。

故障排除

若是 curl 命令失敗，確保 packager 在運行。也嘗試在它的結尾添加 ——ipv4 標誌。

若是你剛剛開始了你的項目，main.jsbundle 可能不會被包含到 Xcode 項目中。要想添加它,右鍵單擊你的項目目錄，而後單擊「添加文件……」——選擇生成的 main.jsbundle 文件。

Android 真機調試

在 Android 設備上打開 USB debugging 並鏈接上電腦啓動調試。

在真機上運行的方法與在模擬器上運行一致，都是經過 react-native run-android 來安裝而且運行你的 React Native 應用。

若是不是 Android 5.0+ (API 21) ，那麼就沒辦法經過 adb reverse 進行調試，須要經過 WiFi 來鏈接上你的開發者服務器

讓調試用電腦和你的手機必須處於相同的 WiFi 網絡中下

打開震動菜單 (搖動設備)

前往 Dev Settings

選擇 Debug server host for device

輸入調試用電腦的局域網IP

點擊 Reload JS

Xcode7上運行報錯解決方法

在 Xcode7 指定真機運行，結果報出以下錯誤：（Undefined symbols for architecture arm64:   "_RCTSetLogFunction）

Undefined symbols for architecture arm64:   "_RCTSetLogFunction", referenced from:       -[PropertyFinderTests testRendersWelcomeScreen] in PropertyFinderTests.o ld: symbol(s) not found for architecture arm64 clang: error: linker command failed with exit code 1 (use -v to see invocation)

在 Build Setting -> Linking ->  Dead Code Stripping 中設置爲 No 就能夠了。

真機調試報錯2：

Invariant Violation: Application Game2048 has not been registered.

有人說是端口緣由：

• Kill already running program.

• Or Change the port by going into : ../lala/node_modules/react-native/packager/packager.js then find your port number, example 8081, and replace with the port number that is not in use.

•  var options = parseCommandLine([{
            command: 'port',
            default: 8082,
          },

有人說是 appName 註冊緣由：

AppRegistry.registerComponent('AwesomeProject', () => YourMainComponent);

var {
  AppRegistry
} = React;

也有人說是樣式緣由：

//將 position: 'absolute' 修改爲  position: 'absolute' 

StyleSheet.create({
  cover: {
    display: 'absolute'
  }
});

以上都沒有解決個人緣由：

最終仔細排查後發現仍是本身 javascript 打包的時候出錯。清除 main.bunndle 中的內容，將 javascript 從新打包了一下，Run -> 成功。（黃天不負有心人，終於成功了，淚奔啊！）

至此 IOS 兩種方法真機調試、運行已完成。前者通常用於開發測試階段，後者用於打包項目，發佈 AppStore。

ps （參考）：

http://wiki.jikexueyuan.com/project/react-native/running-device.html

http://facebook.github.io/react-native/docs/running-on-device-ios.html#content

https://github.com/facebook/react-native/issues/500#issuecomment-111575780

http://stackoverflow.com/questions/29287987/invariant-violation-application-awesomeproject-has-not-been-registered-when-b