[React Native]通过Pod移植RN到iOS原生项目及构建Swift的RN工程

前言

众所周知,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项目
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 如何构建Swift工程我百度很多网站 只有这一个让我跑起来了,其他的可能也对 但是奈何我是新手好多还都不懂 只能慢...
    心淡然如水阅读 3,573评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,195评论 4 61
  • 刚毕业的我们总是以为社会是容易的,干任何事,是简单易行的! 2014年到现在,我已经毕业转眼已经一年了,加上实习,...
    愿你是人间四月天阅读 1,631评论 0 1
  • ios实现磨玻璃在各个系统上都有所不同,新系统总会有比旧系统更好的方式去实现毛玻璃 iOS 6及以下系统,可以生成...
    swweaper5阅读 4,687评论 0 0