http://reactnative.cn/docs/integration-with-existing-apps/
1.安装好ReactNative开发环境
2.安装好CocoaPods
3.创建项目根文件夹:A
4.创建文件夹A/ios
5.创建新项目到A/ios目录下
6.根目录A下创建package.json和index.js(老版本index.ios.js)文件
7.根目录A下执行$ yarn add react-native集成
8.控制台打印可能会出现警告类似warning "[email protected]" has unmet peer dependency "[email protected]".
此时安装指定版本React $ yarn add [email protected]
8.添加CocoaPods到iOS项目中
# target的名字一般与你的项目名字相同 target 'NumberTileGame' do # 'node_modules'目录一般位于根目录中 # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path` pod 'React', :path => '../../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', # 如果RN版本 >= 0.47则加入此行 'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单 'RCTText', 'RCTNetwork', 'RCTWebSocket', # 调试功能需要此模块 'RCTAnimation', # FlatList和原生动画功能需要此模块 # 在这里继续添加你所需要的其他RN模块 ] # 如果你的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
10.$ pod install
11.使用本地Web服务调试
<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>localhost</key> <dict> <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>
在项目根目录A下启动
$npm start
引用框架
#import <React/RCTRootView.h>
- (IBAction)highScoreButtonPressed:(id)sender { NSLog(@"High Score Button Pressed"); NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: jsCodeLocation moduleName: @"RNHighScores" initialProperties: @{ @"scores" : @[ @{ @"name" : @"Alex", @"value": @"42" }, @{ @"name" : @"Joel", @"value": @"10" } ] } launchOptions: nil]; UIViewController *vc = [[UIViewController alloc] init]; vc.view = rootView; [self presentViewController:vc animated:YES completion:nil]; }
12.打包js和资源文件
http://www.cocoachina.com/ios/20170511/19250.html
在根目录下创建release_ios文件夹后
执行
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
13.将生成的main.jsbundle导入到项目中
14.js路径替换为
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];//[NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
15.未知大部分使用者Target下添加了shell命令
export NODE_BINARY=node ../../node_modules/react-native/scripts/react-native-xcode.sh