React Native 如何使用真机进行调试

如何使用真机进行开发，并且使用 pod 作为iOS端库管理工具

1.初始化项目

react-native init Demo

2.设置pod

进入到上面生成的项目中的 ios 文件夹

# 进入ios文件夹
> cd Demo/ios/
# 初始化 Podfile
> pod init

将需要的pod文件写入到刚生成的 Podfile 文件中

target 'Demo' do
  
  # Pods for Demo
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
      'Core',
      'CxxBridge', # Include this for RN >= 0.47
      'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
      'RCTText',
      'RCTWebSocket', # 这个模块用于调试功能的
      
      'RCTVibration',
      'RCTLinkingIOS',
      'RCTImage',
      'RCTAnimation',
      # 'RCTAdSupport',
      'RCTSettings',
      # 'BatchedBridge',
      'ART'
  ]
    
  # 自己安装的需要link的库
  pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
  pod 'RNSVG', :path => '../node_modules/react-native-svg'
    
  # 如果你的RN版本 >= 0.42.0，则加入下面这一行
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
 # 如果你的RN版本 >= 0.45.0，则加入下面这一行
  pod 'DouleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/Glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
    
  target 'DemoTests' do
    inherits! :serch_paths
    # Pods for testing
  end
end

3.删除不需要的Targets

上面的react-native init 会默认的初始化4个Targets：

Demo
DemoTests （可删除）
Demo-tvOS (可删除)
Demo-tvOSTests （可删除）

4.使用开发者账号

需要申请一个开发者账号或者企业账号，对项目进行签名，如果是使用模拟器则不需要

5.将手机和电脑连上同一个wifi

查看wifi的ip，比如我的wifi ip是：

192.168.7.1

在 AppDelegate.m 中设置为wifi模式下调试：

#ifdef DEBUG
  jsCodeLocation = [[RTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"]
#else
  jsCodeLocation = [[NSBundle mainBundle]] URLForResource:@"main" withExtension:@"jsbundle"
#endif

将其改为：

#ifdef DEBUG
  jsCodeLocation = [NSURL URLWithString:@"http://192.168.7.1:8081/index.bundle?pplatform=ios&dev=true"];
#else
  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]
#endif

6.运行项目

在当前项目路径

react-native start --reset-cache

点击Xcode 中的运行即可。