前言

大家都知道Android端的React Native可以運行時修改server host，開發模式下搖一搖設備，呼出調試菜單，就可以修改server host，不需要重新打包很方便。不知道為什麼，iOS環境缺沒有提供相關功能。

於是這個工具就出來了：react-native-debug-server-host

如何使用

使用方式簡單的不能再簡單了，只要把DebugServerHost整個目錄引用到xcode工程中，恭喜你，你已經安裝完畢。

運行一下，看你的調試菜單是不是多了一項：

修改server host可以通過手工輸入，也就是直接在文本框中手工打字，原則上不建議這麼做，太虐心了。因為提供了更方便的修改途徑：掃描二維碼。

具體操作步驟：

1. 將服務器地址通過二維碼生成工具，生成二維碼。

2. 點擊Input URL With QRScan，打開掃一掃工具，掃描二維碼。

3. 點擊OK，會自動執行reload動作。

很方便是吧。集成和使用說完了，下面說下具體實現。只關心使用的朋友就不用繼續往下看了。

 該庫中使用了二維碼掃描庫QRCodeReaderViewController，如果你的工程中也使用了這個庫，保留工程中的，刪除庫中的源文件即可。

實現原理

調試菜單的實現在RCTDevMenu這個類中，每次打開調試菜單時，都會調用menuItems這個方法，它是用來創建菜單選項的，所以我們要添加自己的調試菜單，只需要在末尾追加就可以了。

考慮到react native更新頻率較快，並且直接修改源碼的方式不太科學，因此創建RCTDevMenu的分類，添加自定義菜單，然後使用swizzling技術替換原有方法。swizzling在react native工具類RCTUtils中已經實現。

@implementation RCTDevMenu (serverAddr)
- (NSArray *)newMenuItems {
  NSMutableArray *items = (NSMutableArray *)[self newMenuItems];
  RCTDevMenuItem *item = [RCTDevMenuItem buttonItemWithTitle:@"Debug server host" handler:^{
    [[NSNotificationCenter defaultCenter] postNotificationName:ChangeServerAddrNotification
                                          object:nil
                                          userInfo:nil];
}];
  
    [items addObject: item];
     return items;
}
@end

可以看到，我們添加了一項菜單Debug server host，處理hander發送了一個通知，用來告知處理類打開UI面板，讓用戶設置server host。

- (void)changeServerAddr:(NSNotification *)notification {
  dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
    [[UIApplication sharedApplication].keyWindow.rootViewController presentViewController:_serverAddrviewController animated:YES completion:^{
      NSLog(@"");
    }];
  }); 
}

到這裡，已經實現了調試菜單，並讓用戶修改server host選項。下一步，就要告知RCTBridge新的server host，因為加載的動作是RCTBridge執行的。

RCTBridge有個RCTBridgeDelegate，用來告知server host是哪個，所以只要實現該協議，並指定RCTBridge的具體delegate即可。

//修改RCTBridge的delegate為自定義對象
- (void)setBridge:(RCTBridge *)bridge {
  _bridge = bridge;  if ([_bridge isKindOfClass:[RCTBatchedBridge class]]) {
    RCTBatchedBridge *batched = (RCTBatchedBridge *)_bridge;
    [batched.parentBridge setValue:self forKey:@"delegate"];
  } else {
    [_bridge setValue:self forKey:@"delegate"];
  }
}

//為簡單起見，server host傳遞放在全局配置文件中
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
  NSURL *serverUrl = nil;
  NSString *url = [[NSUserDefaults standardUserDefaults] objectForKey:@"RCT_SERVER_ADDR_URL"];
  if (url != nil && url.length > 1) {
    serverUrl = [NSURL URLWithString: url];
  }
  return serverUrl;
}

核心實現基本就差不多了，剩下沒什麼好說的，有興趣直接看源碼吧。

源碼地址

如果有幫助到你就給顆星吧。