美文网首页
Reactnative与现有原生ios项目集成

Reactnative与现有原生ios项目集成

作者: 求长生 | 来源:发表于2020-05-27 16:58 被阅读0次

植入原生应用

一.手动集成

下面我使用Xcode创建一个新的项目作为我们原生的ios项目:

打开Xcode -> Create a new Xcode project -> Single View Application -> ReactnativeIOS

[图片上传失败...(image-bae042-1590569895115)]

现在,我们已经存在一个名为ReactnativeIOS的ios项目,下面我们看看怎么集成reactnative到该项目中。

1、安装react-native

我们在ReactnativeIOS项目目录建一个reactnative目录,用于存放我们的react-native相关文件,再创建一个package.json文件,用于初始化react-native。

[图片上传失败...(image-aa4618-1590569895115)]

//package.json
{
    "name": "ReactnativeIOS",
    "version": "0.0.1",
    "private": true,
    "dependencies": {
        "react": "^0.14.8",
        "react-native": "^0.22.2"
    }
}

执行安装: cd reactnative npm install

安装成功后,reactnative目录会产生一个node_modules,里面就是react-native依赖的所有项目包。

2、创建index.ios.js文件

在reactnative目录下创建index.ios.js文件:

//index.ios.js

'use strict';

var React = require('react-native');  
var {  
    Text,
    View
} = React;

var styles = React.StyleSheet.create({  
    container: {
        flex: 1,
        backgroundColor: 'red'
    }
});

class SimpleApp extends React.Component {  
    render() {
        return (
            <View style={styles.container}>
                <Text>This is a simple application.</Text>
              </View>
        )
    }
}

React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);  

这就是js程序的入口文件。ok,以上我们已经完成react-native的准备工作,接下来要开始集成~

3、手动集成react-native

如果你的项目使用了Cocoapods,可以跳过这一步,直接看“二、 Cocoapods集成react-native”这一步,使用Cocoapods集成react-native。

  • 添加react-native工程文件 由于项目没有使用Cocoapods进行第三方依赖包管理,所有我们需要手动将react-native工程包添加到我们的原生ios工程中。打开reactnative/node_modules/react-native目录,找到相关的项目包,将React相关的工程包手动添加到项目中:
添加`react-native/React/React.xcodeproj`到项目中
添加`react-native/Libraries/Network/RCTNetwork.xcodeproj`到项目中
添加`react-native/Libraries/Text/RCTText.xcodeproj`到项目中
添加`react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj`到项目中
添加`react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj`到项目中

如图所示:

[图片上传失败...(image-823b0a-1590569895115)]

添加的原则是,你需要什么就添加什么工程包。好了,我们已经将React相关工程包手动添加到ReactnativeIOS工程项目的reactnative目录下。

  • 添加相关frameworks文件 接下来要将相关的frameworks文件添加到工程中,ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Phases -> Link Binary Width Libraries。

[图片上传失败...(image-624625-1590569895115)]

点击+号,将所有.a文件选中并添加。

[图片上传失败...(image-eb11f1-1590569895115)]

  • 添加搜索头文件的地址 ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Settings -> Header Search Paths,添加一条$(SRCROOT)/reactnative/node_modules/react-native/React,选择recursive。

这样我们就react-native集成到现有的ios工程中了。

以上是手动集成react-native工程到现有ios中,如果项目中使用了Cocoapods或者你现在就想用Cocoapods,怎么做呢?

二、Cocoapods集成react-native

如果你已经完成了第三步的手动集成,可以跳过这一步。

  • 安装Cocoapods $ gem install cocoapods

  • 创建Podfile Cocoapods通过解析Podfile指定的工程文件进行依赖安装,我们在工程目录下创建一个Podfile文件:

# 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './reactnative/node_modules/react-native', :subspecs => [  
  'Core',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # 添加其他你想在工程中使用的依赖。
]

记得要添加所有你需要的依赖。举例来说,元素如果不添加RCTText依赖就不能运行。

  • 依赖文件安装 进入工程目录,执行$ pod install,就完成了react-native工程包的集成。

  • 打开ReactnativeIOS.xcworkspace Cocoapods安装成功之后,工程目录会产生一个ReactnativeIOS.xcworkspace的工程文件,我们使用Xcode打开这个工程打开这个工程文件。

三、添加react-native应用

下面我们在原生ios应用中添加一个视图容器,用于展示react-native实现的内容。

*在原生ios应用添加容器视图 我们在工程文件下创建一个名为ReactView的UIView文件: ReactnativeIOS目录 -> 右键 -> New File -> Cocoa Touch Class -> ReactView,

[图片上传失败...(image-15b9d4-1590569895115)]

修改ReactView.m

#import "ReactView.h"
#import <RCTRootView.h>

@implementation ReactView

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
        NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];

        RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                             moduleName:@"SimpleApp"
                                                      initialProperties:nil
                                                          launchOptions:nil];

        [self addSubview:rootView];

        rootView.frame = self.bounds;
    }
    return self;
}
@end

ReactView.m中通过http://localhost:8081/index.ios.bundle?platform=ios&dev=true加载bundle文件,由RCTRootView解析转化原生的UIView,然后通过initWithFrame将frame暴露出去。

*在原生ios应用中引用RCTRootView 上面我们创建了一个RCTRootView,怎么在原生应用中引入该View呢? 打开ViewController.m,在viewDidLoad方法中应用我们的ReactView。

#import "ViewController.h"
#import "ReactView.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet ReactView *reactView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)];

    [self.view addSubview:reactView];
}

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

@end

至此,我们所有的集成工作已经完成,接下来就是运行项目啦。

三、启动开发服务器

在运行我们的项目之前,我们需要先启动我们的开发服务器。进入reactnative目录,然后启动。 cd reactnative react-native start

[图片上传失败...(image-299c99-1590569895115)]

看到上面的界面就标示我们的服务已经启动啦!

运行iOS项目

通过Xcode点击项目或者command + R运行项目,如果顺利的话,就会看到成功运行的界面:

[图片上传失败...(image-911821-1590569895115)]

相关文章

网友评论

      本文标题:Reactnative与现有原生ios项目集成

      本文链接:https://www.haomeiwen.com/subject/cmtbittx.html