使用React Native的版本是0.46,不同版本有所差别,楼主已被坑过。
一、正常新建一个新OC工程,加入Pod。
二、在工程根目录新建文件夹RNComponent,在文件夹下拖入根据官网新建例子AwesomeProject根目录下的package.json,终端打开到此目录后执行
npm install
三、pod更新到1.2.1版本(注意点,否则可能报错),pod安装
pod 'Yoga', :path => './RNComponent/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => './RNComponent/node_modules/react-native', :subspecs => [
'Core',
'BatchedBridge', # 0.45 版本以后需要添加
'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
'RCTText',
'RCTWebSocket',
'RCTNetwork',
]
四、在RNComponent文件下拖入根据官网新建例子AwesomeProject根目录下的index.ios.js,修改一个class名称,注册行代码
export default class NativeRN extends Component
AppRegistry.registerComponent('NativeRN', () => NativeRN);
五、导入头文件
#import "ViewController.h"
#import <React/RCTRootView.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"NativeRN"
initialProperties:nil
launchOptions:nil];
self.view = rootView;
}
六、plist文件允许http访问
七、终端打开到RNComponent文件夹,执行
npm start
八、运行Xcode,看到AwesomeProject例子首页就对了。有问题,检查一下版本号,去找新的教程,或者搜索吧。
推荐文章:http://www.jianshu.com/p/47174bf215bf 注意看第一条评论。
网友评论