36b81151-96a1-4049-841e-7fcf22e4cd04.jpg

第一次集成遇到很多坑,百度的教程什么版本都有遇到各种的错误好久没有解决,现在这个集成过程记录下来,方便自己集成和其他有需要的

.配置环境请移步环境配置;

1.新建一个空的Xcode工程,命名为GHomeRN

image.png

1.打开终端cd到项目根目录 创建Podfile文件

pod init

image.png

集成cocoaspod

pod install

现在我们还需要几个配置文件,这些文件最好不要手动创建,这里有个小技巧,退出终端,重新打开终端,创建一个和GHomeRN的rn项目

react-native init GHomeRN

image.png

在新创建的项目根目录里找到这两个文件,点击复制.粘贴到第一个GHomeRN的根目录下

image.png

现在目录结构是这样的

image.png

再打开终端cd到GHomeRN根目录下执行命令

image.png

配置pod

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'GHomeRN' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for GHomeRN
  pod "yoga", :path => "./node_modules/react-native/ReactCommon/yoga"
  pod 'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
  'RCTText',
  'RCTNetwork',
  'BatchedBridge',
  'RCTWebSocket',
  'RCTRootView',
  # 这个模块是用于调试功能的
  # 在这里继续添加你所需要的模块
  ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行
end

配置完成后终端pod install

这里可能会报错,执行下提示的命令

image.png

个

添加成功

image.png

10.新建一个控制器GHTestViewController包含头文件

import <React/RCTRootView.h>在控制器中添加如下代码

    NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
    NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
    
    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                         moduleName:@"GHomeRN"
                                                  initialProperties:nil
                                                      launchOptions:nil];
    self.view = rootView;

在viewController里导入这个控制器,写一个push方法跳转过去,编译运行时,发现报错

image.png

检查错误发现是没有连接服务器,我们需要启动服务器,同事打开网络连接

npm start

image.png

再次运行可以编译成功

image.png