React Native嵌入ios原生应用

使用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 

@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 注意看第一条评论。

你可能感兴趣的:(React Native嵌入ios原生应用)