将RN工程嵌入到现有原生iOS应用

·  阅读 2749
原文链接: flyoceanfish.top

今天心血来潮,就想尝试一下将RN工程单独嵌入到原生工程中,所以就做了尝试,本文是通过cocopods集成RN到现有工程的,但是其中也遇到一个问题,怎么编译都不过。

依赖包

React Native的植入过程同时需要React和React Native两个node依赖包,所以需要我们创建package.json文件和正确的RN文件目录结构

对于一个典型的React Native项目来说,一般package.json和index.ios.js等文件会放在项目的根目录下。而iOS相关的原生代码会放在一个名为ios/的子目录中,这里也同时放着你的Xcode项目文件(.xcodeproj)。

88161340-E7F4-46B0-86A9-5A13DCCDA819.png

按照上图的目录结构创建

package.json

{
    "name": "TestReactNative",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "16.0.0-alpha.6",
        "react-native": "0.44.3"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "2.1.0",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.6"
    },
    "jest": {
        "preset": "react-native"
    }
}复制代码

安装依赖包

使用npm(node包管理器,Node package manager)来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。 在包含有package.json文件的目录(一般也就是项目根目录)中运行下列命令来安装:

npm install

新建index.ios.js

这个是随便一个index.ios.js即可,我是从一个RN的初始化工程复制了一个出来

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
export default class DemoApp extends Component {
  render() {
    return (
      
        
          Welcome to React Native!
        
        
          To get started, edit index.ios.js
        
        
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        
      
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
AppRegistry.registerComponent('TestReactNative', () => DemoApp);
复制代码

至此RN的相关依赖已经配置好,接下来就该配置cocopods了

cocopods配置

1、创建Podfile,如果已经有了可以忽略此步骤

## 在iOS原生代码所在的目录中(也就是`.xcodeproj`文件所在的目录)执行:
$ pod init复制代码

Podfile文件内容如下:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
target 'TestReactNative' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
  # Pods for TestReactNative
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
  ]
  # 如果你的RN版本 >= 0.42.0,请加入下面这行
  pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end复制代码

subspecs就是你依赖的包。可用的subspec都列在node_modules/react-native/React.podspec 中,基本都是按其功能命名的。一般来说你首先需要添加Core,这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些React Native核心库。如果你想使用React Native的Text库(即组件),那就需要添加RCTText的subspec。同理,Image需加入RCTImage,等等。
2、安装依赖包
执行pod install
C07B6B3E-1642-4EAC-9814-BE6A55C4527C.png
会看到以上过程则表示安装依赖已经成功
3、调用RN工程

#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.
}
- (IBAction)actionClick:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"TestReactNative"
                         initialProperties :nil
                          launchOptions    : nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end复制代码

至此整集成已经结束,可以直接运行xcode过程,或者通过命令运行工程

# From the root of your project, where the `node_modules` directory is located.
$ npm start复制代码
# 在项目的根目录中执行:
$ react-native run-ios
复制代码

不知道大家有没有注意我们package.json中react-native中的版本是”0.44.3”,而为什么不是最新版46的呢??这就是一个很大的坑!从45版本开始RN有4个文件被墙了,所以如果大于44版本的react-native会一直编译不过
有以下3个解决方案:
1、不导入最新的包,导入44版本
2、翻墙呗。。。。
3、下载被墙的4个依赖包,手工导入

优化加载速度

在原生调用RN的时候有点慢。大家在集成的时候会发现加载的过程挺慢的,可以压缩加载本地文件,这样加载就快了。通常我们可以将文件放到服务器上,然后通过IP地址来加载,这种方式其实也是比较慢的,最好的方式就是将文件提前下载到本地,通过一定的更新机制确保本地文件时最新的,通过使用这种方式加载就很快了。

  • 到当前项目的根目录中执行:

    react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ios/main.jsbundle复制代码
  • 将main.jsbundle加载到Xcode工程中,然后通过以下方式获取URL地址来加载

    NSString *path = [[NSBundle mainBundle] pathForResource:@"main" ofType:@"jsbundle"];
    NSURL *jsCodeLocation = [NSURL URLWithString:path];复制代码

如果大家在这个过程还有不明白的可以留言给我,我将尽最大努力给大家解决的哦

收藏成功!
已添加到「」, 点击更改