美文网首页
iOS 原生使用CocoaPods集成RN流程

iOS 原生使用CocoaPods集成RN流程

作者: 李木的 | 来源:发表于2019-03-08 16:48 被阅读0次

    1.先在项目工程中根目录新建一个ReactNative文件夹,在此文件夹中中新建一个package.json文件,在文件中写入

     {
              "name": "ReactNativeDemo",
               "version": "0.0.1",
               "private": true,
              "scripts": {
               "start": "node node_modules/react-native/local-cli/cli.js start"
                              },
                  "dependencies": {
                                   "react": "16.6.3",
                                   "react-native": "^0.58.6"
                }
     }
    
    2.执行npm install命令后,会出现node_modules文件

    3.创建index.js文件作为程序入口。
    4.在podfile中添加第三方依赖库

    platform :ios, '10.0'
    source 'https://github.com/CocoaPods/Specs.git'
    react_native_path = './ReactNative/node_modules/react-native'
    
    target 'ExchangeToken' do
      use_frameworks!
      pod 'RxSwift' #响应式编程
      pod 'RxCocoa' #响应式cocoa
      pod 'Moya/RxSwift' #网络请求
      pod 'RxDataSources' #列表处理
      pod 'ObjectMapper' #模型
      pod 'Moya-ObjectMapper/RxSwift'
     #数据库
      pod 'SDCAlertView'
      pod 'IQKeyboardManagerSwift' #键盘处理
      pod 'Toast-Swift', '~> 4.0.0' #toast
      pod 'Kingfisher'  #图片处理
      pod 'SwiftDate' #时间处理
      pod 'PullToRefresher' #刷新
      pod 'EmptyPage'#空白页
      pod 'SwifterSwift'
      pod 'SnapKit'
      pod 'DropDown'
      pod 'CHKLineChartKit'
    # 'node_modules'目录一般位于根目录中
    # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
    pod 'React', :path => react_native_path, :subspecs => [
    'Core',
    #'BatchedBridge', # 0.45 版本以后需要添加
    'CxxBridge',
    'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
    ]
    # 如果你的RN版本 >= 0.42.0,则加入下面这行
    pod 'yoga', :path => react_native_path + '/ReactCommon/yoga'
    # Third party deps
    pod 'DoubleConversion', :podspec => react_native_path + '/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => react_native_path + '/third-party-podspecs/glog.podspec'
    pod 'Folly', :podspec => react_native_path + '/third-party-podspecs/Folly.podspec'
    
    
    
      # Pods for ExchangeToken
      target 'ExchangeTokenTests' do
        inherit! :search_paths
        # Pods for testing
      end
    
      target 'ExchangeTokenUITests' do
        inherit! :search_paths
        # Pods for testing
      end
    
    end
    

    5.更新podfile文件
    6.在UIViewController中调用时需要跟RN工程师进行制定规则,我是用Swift集成调用如下:

        func setRN()  {
            let urlLocal = NSURL.init(string: "http://localhost:8081/index.bundle?platform=ios")
            let rootView = RCTRootView.init(bundleURL: urlLocal! as URL, moduleName: "App", initialProperties: ["scores":[["name" : "Alex","value":12],["name" :"Joel","value":314]]], launchOptions: [:])
               view = rootView
        }
    

    相关文章

      网友评论

          本文标题:iOS 原生使用CocoaPods集成RN流程

          本文链接:https://www.haomeiwen.com/subject/tjorpqtx.html