美文网首页
[React Native]通过Pod移植RN到iOS原生项目及

[React Native]通过Pod移植RN到iOS原生项目及

作者: laznrbfe | 来源:发表于2016-07-20 12:03 被阅读631次

    前言

    众所周知,react-native init [工程名]创建出来的iOS项目是Objective-C语言的。那我们怎么构建Swift工程呢?或者怎么通过Pod移植RN到iOS原生项目中呢?

    步骤

    • 创建react-native项目
      打开终端,切换到存放工程的目录,并输入如下命令(注:ReactNativeProjectName换成你的工程名。)
    react-native init ReactNativeProjectName
    
    • 删除ios目录里面的内容。此时ios里面没有任何文件。
    • 使用Xcode,创建Swift/Objective-C工程。
    • 终端切换至ios目录,创建并打开Podfile文件。
    cd ios
    vim Podfile
    

    复制以下内容到Podfile文件(注:iOSProjectName改成你的Target名,没有特殊需要,改为iOS的工程名就行.[]里面的内容,按需添加.path后面的路径也可以按照你的需要进行修改.)。

    source 'https://github.com/CocoaPods/Specs.git'
    platform :ios, '7.0'
    use_frameworks!
    
    target 'iOSProjectName' do
    
      pod 'React', :path => '../node_modules/react-native', :subspecs => [
        'RCTText',
        'RCTImage',
        'RCTWebSocket',
        'RCTPushNotification',
        'RCTActionSheet',
        'ART',
        'RCTCameraRoll'
      ]
    end
    
    • 通过CocoaPods管理第三方库
    pod install
    
    • 打开iOS工程
      双击.xcworkspace打开。
    • AppDelegate.m/AppDelegate.swift或者你需要的地方添加一些代码。例如:
    // 在AppDelegate.swift中.注:ReactNativeProjectName按照你自己的需求进行修改
    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
            // Override point for customization after application launch.
            
            let moduleName:String = "ReactNativeProjectName"
            let jsCodeLocation: NSURL
    
            jsCodeLocation = NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios&dev=true")!
    
    //        jsCodeLocation = NSBundle.mainBundle().URLForResource("main", withExtension: "jsbundle")!
    
            let rootView: RCTRootView = RCTRootView(bundleURL: jsCodeLocation, moduleName: moduleName, initialProperties: nil, launchOptions: launchOptions)
            
            rootView.backgroundColor = UIColor.whiteColor()
            
            let rootViewController = UIViewController()
            rootViewController.view = rootView
            
            window = UIWindow(frame: UIScreen.mainScreen().bounds)
            window?.rootViewController = rootViewController
            window?.makeKeyAndVisible()
            
            
            return true
        }
    
    • 运行
    • 终端切换到ReactNative工程的根目录。
    • 开启服务
    npm start
    
    • 运行iOS项目

    相关文章

      网友评论

          本文标题:[React Native]通过Pod移植RN到iOS原生项目及

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