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
}
网友评论