Skip to content

Latest commit

 

History

History
107 lines (68 loc) · 3.08 KB

lesson9.md

File metadata and controls

107 lines (68 loc) · 3.08 KB
Raw

React Native 与 App 集成方案

##一、前言 Facebook提供了“Integrating with Existing Apps”方案，但是需要使用pod install, 会出现版本更新不及时。那么如何手动集成到Native代码中去呢？这里提供一个简单的Demo供参考。

##二、构建步骤 1. 创建 React Native项目，目的是获取最新的React Native包 $ react-native init test
2. 创建 Native项目，例如ReactTest 3. 将test/node_modules拷贝到ReactTest根目录下 4. 在ReactTest项目中创建Group：Libraries 5. 在Group：Libraries中添加依赖的React Native项目： /node_modules/react-native/React/React.xcodeproj /node_modules/react-native/Libraries/Text/RCTText.xcodeproj /node_modules/react-native/Libraries/WebSocket/RCT WebSocket.xcodeproj

添加完成如下图     


6. Build Rules中添加静态库文件，如下图         


7.添加依赖循环    
$(SRCROOT)/node_modules/react-native/React
如下图所示：

8.修改AppDelegate.m应用启动代码

#import "AppDelegate.h"
#import "ViewController.h"

@interface AppDelegate ()
@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    if(!self.window){
        self.window = [[UIWindow alloc]init];
    }
    
    self.window.frame = [[UIScreen mainScreen]bounds];
    self.window.backgroundColor = [UIColor whiteColor];
    self.window.rootViewController = [ViewController new];
    [self.window makeKeyAndVisible];
    return YES;
}

9.在ViewController.m中调用React Native和Native混编

#import "ViewController.h"
#import "RCTRootView.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *searchBtn = [[UIButton alloc]init];
    searchBtn.frame = CGRectMake(0 + 5, 0, 100, 100);
    searchBtn.backgroundColor = [UIColor colorWithRed:0.000 green:0.569 blue:1.000 alpha:1];
    [searchBtn setTitle:@"搜索" forState:UIControlStateNormal];
    [searchBtn setTitle:@"搜索" forState:UIControlStateHighlighted];
    
    NSURL *jsCodeLocation;
    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"Study"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    rootView.frame = [[UIScreen mainScreen]bounds];
    [self.view addSubview:rootView];
    [self.view addSubview:searchBtn];
    

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

10.还需要设置下Other Linker Flags, 如下图

11. OK 享受编程吧