一、准备材料:1.现有的Swift(OC)项目;2.现有的ReactNative项目;3.Cocoapods
二、步骤:
(1) 首先进入ReactNative项目根目录下,删除node_modules和package-lock.json两个文件。(注:这两个文件通过后期npm install可重新生成)
(2) 进入ios文件夹删除原有的项目,将自己现有的项目直接复制过来。
(3) 打开控制台,进入到ReactNative项目根目录下,npm install即可。
(4) 控制台进入ios文件中,open podfile,编辑这也是最为关键的一步,输入以下:
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.4' # swift项目,必须有这个
use_frameworks! # swift项目,必须有这个
inhibit_all_warnings!
target 'SampleApp' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本>= 0.45则加入此行
'DevSupport', # 如果RN版本>= 0.43,则需要加入此行才能开启开发者菜单
'RCTText',
'RCTAnimation',
'RCTImage',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的'RCTLinking',
'RCTLinkingIOS',
'ART',
'RCTActionSheet',
'RCTGeolocation',
'RCTPushNotification',
'RCTSettings',
'RCTVibration',
'RCTBlob',
# 在这里继续添加你所需要的RN模块
]
pod 'RNGestureHandler', :path => "../node_modules/react-native-gesture-handler"
pod 'RNCAsyncStorage', :path => "../node_modules/@react-native-community/async-storage"
pod 'RNVectorIcons', :path => "../node_modules/react-native-vector-icons"
# 如果你的RN版本>= 0.42.0,请加入下面这行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 如果RN版本>= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :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'
end
说明:其实这是一种变相的去ReactNative项目中的node_modules去寻找对应的组件库,你其实可以试试通过原来ReactNative帮你创建的项目中去打开iOS工程,对着那些ReactNative库进行 show in Finder,你会发现其实也是通过链接到node_modules这样的方式去寻找组件库的,【当然手动集成其实也是这个原理】,若运行过程中会出现Native module cannot be null,说明你的ReactNative用到了一些iOS专有的系统组件库,但是你的iOS项目中却缺少了这部分的组件库,你可以根据实际需要的库,进行pod即可,具体参考上面的podfile文件,其路径仔细研究,其实你完全可以自己根据上面的path路径,通过打开文件夹的方式一级级点进去看看,就明白什么意思了。
(5) pod install 即可。
(6) 打开iOS工程,对AppDelegate.swift 进行相关配置,如下:
在此方法下
“func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {”
写如下代码:
window = UIWindow(frame: UIScreen.main.bounds)
//192.168.3.25是手机与你当前服务(node服务)所连的ip保持一致即可
let jsCodeLocation = URL(string: "http://192.168.3.25:8081/index.bundle?platform=ios")
let rootView = RCTRootView(
bundleURL: jsCodeLocation,
moduleName: "emotion",// emotion:该名字与ReactNative那边保持一致,否则会报错,具体不再阐述,很容易解决的。
initialProperties: nil,
launchOptions: nil
)
let rootVC = UIViewController()
rootVC.view = rootView
window?.rootViewController = rootVC
window?.makeKeyAndVisible()
return true
(7) 最后,运行:先通过控制台进入ReactNative根目录下,输入npm start 来启动服务,然后打开iOS工程,运行。此处可能会运行,但实际运行后,可能会出错,由于字体缺失,或者其他的隐形问题(暂未遇到),就字体缺失问题阐述下,进入Xcode,点击File-> Workspace Setting->Build System->选择Legacy Build System,再尝试运行,若字体库出来却显示红色,可能需要手动导入字体库了(目前我是这么做的),在node_module文件夹中的native-base中的Fonts复制并黏贴到iOS工程目录下,再进行Add到项目中即可。