React Native移植到原生iOS平台项目

最新推荐文章于 2022-05-09 09:31:03 发布

黔北iOSer

最新推荐文章于 2022-05-09 09:31:03 发布

阅读量1k

点赞数

分类专栏： React Native专题学习

React Native专题学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

React Native移植到原生iOS平台项目

（一）前言

这篇文章主要给大家讲解一下如何在目前现有的纯iOS项目中加入React Native模块，然后在纯iOS项目的基础上使用JS开发项目。

React更多的是作为MVC模式中的V视图层存在，所以非常容易嵌入到非React Native开发的应用中。实际上，它可以和常见的工具进行结合，例如CocoaPods点击进入了解.

（二）准备工作

2.1 安装CocoaPods

如果大家之前是做iOS开发的，这一步可能需要忽略。如果之前是做其他开发的，安装其实也很简单，在命令行中输入 sudo gem install cocoapods命令安装。

2.2 安装Node.js

如果是安装之前的文章来学习React Native，那么应该都是安装好了Node.js了，如果没有安装可以参考之前文章

2.3 安装node_modules到原生项目
通过命令行 npm install react-native

这一步就是安装node_modules到项目中，node_modules中包含关于node的所有模块，也就是说这一步把开发React Native所需要的框架都下载到项目目录中，然后在通过接下来要讲的第三节中的CocoaPods命令，将我们需要的React Native模块整合到纯iOS项目中，让其变得不纯。

2.4 安装React，前面安装了node_modules之后，并没有安装React，并且必须要15.0.1 以上版本。步骤如下：在node_modules目录下创建一个package.json文件，文件中如下内容：

{
  "name": "iOSTest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "^15.1.0",
    "react-native": "^0.27.0-rc2"
  }
}

因为name中不能出现中文，所以删除了中文。然后在命令下切换到工程目录，输入 npm instal。

通过以上步骤，在项目根目录下面存在一个React Native包，即node_modules,它和.xcodeproj在同一个目录下。

（三）使用CocoaPods安装React Native库

CocoaPods是iOS开发中非常流行的第三方库管理，我们需要使用CocoaPods来进行添加React Native依赖。

具体使用方法：
1. 在iOS项目主目录下面创建Podfile文件
2. 在Podfile中添加如下代码：

target 'ProjectName' do
  pod 'React', :subspecs => [
    'Core',
    'RCTActionSheet',
    'RCTImage',
    'RCTNetwork',
    'RCTText',
    'RCTWebSocket',
    'RCTPushNotification',
    'RCTLinkingIOS',
    'RCTVibration',
  ], :path => '../node_modules/react-native'
end

最后，切换到iOS主目录，执行pod install。

【注意】记住安装自己所需要的组件依赖，例如：如果你需要使用< ImageView >,但是没有安装RCTImageView，那么是会出现错误。

（四）创建React Native应用

创建React Native应用步骤基本可以归纳为两个步骤：

React Native应用入口或者根JavaScript文件必须包含实际React Native应用组件。
创建OC类或者Swift类，加载JS脚本代码,并通过脚本代码在该类中创建一个RCTRootView来显示并管理React Native组件。

下面，我们详细介绍这两步的操作步骤：
1. 首先切换到创建的原生iOS项目目录，使用命令 mkdir ReactComponent 创建一个ReactComponent文件夹；使用命令touch index.ios.js 创建一个JS脚本代码文件;

将下列代码复制粘贴到 index.ios.js 文件中；

'use strict';

import React, { Component } from 'react';
import  {
   AppRegistry,
   StyleSheet,
   Text,
   View
} from 'react-native'

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

class SimpleApp extends Component {
      render(){
          return (
             <View style={conststyles.container}>
                <Text>我是iOS大牛，我正在getting React Native新技能！我还想还是喜欢她！</Text>
             </View>
          )
      }
};
AppRegistry.registerComponent('SimpleApp',() => SimpleApp);

这就完成了上诉第一步。

接下来第二步就有点复杂，因为要涉及到iOS开发中创建UIView过程，对于iOS开发者来说非常简单，但是由于一些不是iOS开发者来说就有点不好理解，所以我就使用最好理解的方式向大家讲解这一步。

2.创建并显示React Native组件View的容器UIView类
首先在iOS项目中创建OC类或者Swift类，该类继承自UIView，我命名为ReactView；然后在你所想显示ReactView的ViewController的viewDidLoad方法中添加如下代码；

// UIViewController.m
ReactView *reactView = [[ReactView alloc] init];
reactView.frame = CGReactMake(100,100,251,251);
reactView.backgroundColor = [[UIColor grayColor]];
[self.view addSubview: reactView];

然后在ReactView的 initWithFrame 方法中添加如下代码：

// ReactView.m
/**
 * 还需要创建一个RCTRootView类型属性。
 *
 */

@interface ReactView ()

@property (nonatomic, weak) RCTRootView *rootView;

@end


  self = [super initWithFrame:frame];
    if (self){
        NSURL *jsLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
        RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsLocation moduleName:@"SimpleApp" initialProperties:nil launchOptions:nil];
        self.rootView = rootView;
        [self addSubview:rootView];
    }
    return  self;

然后在layoutSubviews 方法中加入一段代码：

[super layoutSubviews];
self.rootView.frame = self.bounds;

（五）启动本地服务器

在项目根目录下面，输入一下命令行代码开发React Native开发服务器，命令如下：

(JS_DIR='pwd'/ReactComponents;cd node_modules/react-native; npm run start -- --root $JS_DIR)

以上命令就是开启React Native开发服务器，–root选项用来指定React Native应用所在根目录，此处例子是ReactComponents目录，该文件夹用来放置js文件。服务器启动之后，会自动生成index.ios.bundle文件，然后让我们可以通过http://localhost:8081/index.ios.bundle访问。

（六）修改App Transport Security

在iOS9.0 +版本的系统中应用是强制支持https访问服务器，如果要使应用使用http访问主机，必须进行特殊配置。具体详细解决方案参考具体详细解决方案参考。在这里我就使用最简单的方式使其支持http访问localhost。在info.plist文件中修改，添加如下代码代码：

    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <!--Include to allow subdomains-->
                <key>NSIncludesSubdomains</key>
                <true/>
                <!--Include to allow HTTP requests-->
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
                <!--Include to specify minimum TLS version-->
                <key>NSTemporaryExceptionMinimumTLSVersion</key>
                <string>TLSv1.1</string>
            </dict>
        </dict>
    </dict>