iOS开发---混编之原生代码中嵌入ReactNative

在许多的项目开发中，直接用ReactNative的项目不会很多，大部分都是原生的代码中，需要嵌入一两个界面，运用ReactNative。当然也有在ReactNative中跟原生的代码进行交互的情况。

ReactNative中文网中也有相关的集成说明，但是由于刚学习，对这方面还有些懵，会遇到一些问题，在这里就可以帮助初学者更快的跳过这些坑。下面我就简单的说一下将ReactNative项目成功地集成到ios端，并完成所有原生app与javascript交互的功能。

注：本文是在已经配置好ReactNative环境的前提下进行的操作。如果该环境未配置好，可以参考搭建ReactNative开发环境

环境集成：

一、创建依赖包文件(package.json)

React Native的植入过程同时需要React和React Native两个node依赖包。我们把具体的依赖包记录在package.json文件中。

  • 如果项目根目录中没有这个文件，那就自己创建一个。
  • 如果为了目录结构的美观，也可以在根目录下创建一个文件夹，放置相关的ReactNative文件。

如果自己创建package.json文件，终端操作

$ cd 需要放置的目录下（项目的根目录/项目中自己创建的文件夹）
$ touch package.json

里面的内容，可以参考一下示例。

记得删除里面的文字注释，包括双斜杠，否则报错，这里只是为了说明。
{
  "name": "NumberTileGame",//此处替换你的项目名称
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.4.1",// react版本，可以替换成最新的。
    "react-native": "0.42.0"// 同上，目前最新0.42.0
  }
}

如果是从已有的ReactNative中拷贝过来的，修改一下里面的name即可。

二、安装依赖包(node_modules)

使用npm（即node包管理器，Node package manager）来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。

  • 终端进入包含有package.json文件的目录下，运行下列命令来安装：
$ cd 项目的根目录/项目中自己创建的文件夹
$ npm install

等待执行完毕。项目中会多出一个node_modules文件夹。

很多同学在执行npm install可能会报各种错误，终极解决方案：直接react-native init ~ 产生一个新的工程，拷贝node_modules文件夹即可。

三、添加React Native框架(Podfile)

在React和React Native模块成功安装到node_modules目录之后，你就可以开始创建Podfile以便选择所需的组件安装到应用中。

创建Podfile的最简单的方式就是在iOS原生代码所在的目录中使用CocoaPods的init命令：

## 在iOS原生代码所在的目录中（也就是`.xcodeproj`文件所在的目录）执行：
$ cd 项目的根目录
$ pod init

如果电脑中还没有配置CocoaPods，可以参考一下这篇文章，更快的配置好最新最详细的CocoaPods安装教程。
然后再Podfile中添加一下内容:
注：编辑Podfile的时候，尽量不要用文本编辑器，可以使用Xcode打开，或者用vim Podfile去编辑。

# 最低适配的版本
platform :ios, "9.0"
use_frameworks!
# target的名字一般与你的项目名字相同
target 'TestReactNative' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
#记得此处的路径，如果你有创建一个新的文件夹存放这些文件，前面要加上你文件夹的名字：'../RNComponent/node_modules/react-native'，如果没有，直接如下创建即可。
  pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
  ]
 # 如果你的RN版本 >= 0.42.0，请加入下面这行
# 该版本号是package.json中的“dependencies”字典下面的“react-native”后面对应的内容
  pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"
end

如果RN版本低于0.42.0，应该不会出现以下问题。
注：错误提示 我经过尝试，加入* pod "Yoga", :path => "./node_modules/react-native/ReactCommon/yoga"*这一行之后，会提示失败（见下图）。
如果出现此问题，说明./node_modules/react-native/ReactCommon目录下没有yoga文件，因此建议用第二步骤中提示的直接react-native init ~ 产生一个新的工程，替换已有的node_modules文件夹，直接npm install安装的文件可能不太完整。

PodInstall安装失败图.png

替换之后终端中再执行一遍pod install。

创建好了Podfile后，就可以开始安装React Native的pod包了。

成功的图.png
$ cd 项目的根目录
$ pod install
四、代码集成(index.ios.js文件创建)

现在我们已经准备好了所有依赖，可以开始着手修改原生代码来把React Native真正植入到应用中了。

  • 首先创建一个空的index.ios.js文件。一般来说我们把它放置在同上面的package.json的同级目录下。
$ cd 项目的根目录/项目中自己创建的文件夹
$ touch index.ios.js
  • 在index.ios.js中添加你自己的组件。这里我们只是简单的添加一个<Text>组件，然后用一个带有样式的<View>组件把它包起来。
  • 在index.ios.js中实现跨平台代码：

例如：

'use strict';

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

class RNHighScores extends React.Component {
  render() {
    var contents = this.props["scores"].map(
      score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
    );
    return (
      <View style={styles.container}>
        <Text style={styles.highScoresTitle}>
          2048 High Scores!
        </Text>
        <Text style={styles.scores}>    
          {contents}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  highScoresTitle: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  scores: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

// 整体js模块的名称
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
五、iOS项目中进行初始化配置

进到iOS项目工程中，并进行初始化配置：

  • 首先导入RCTRootView.h头文件
// #import "RCTRootView.h"，更新之后，需要导入下面的头文件。
// 官网的评论下方也有说明，否则会提示RCTRootView.h文件不存在。
#import <React/RCTRootView.h>
  • viewDidload中加入代码
NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
    RCTRootView *rootView =
      [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                           moduleName        : @"RNHighScores"
                           initialProperties :
                             @{
                               @"scores" : @[
                                 @{
                                   @"name" : @"Alex",
                                   @"value": @"42"
                                  },
                                 @{
                                   @"name" : @"Joel",
                                   @"value": @"10"
                                 }
                               ]
                             }
                           launchOptions    : nil];
    UIViewController *vc = [[UIViewController alloc] init];
    vc.view = rootView;
    [self presentViewController:vc animated:YES completion:nil];
六、启动开发服务器，运行Packager
# 进入到node_modules文件夹所在的路径
$ cd 项目的根目录/项目中自己创建的文件夹
$ npm start

启动开发服务器成功.png

注意：直接运行项目会报Could not connect to development server错误，需要在项目中配置App Transport Security。(相信这个大家都会的啦(≧▽≦)/)
在info.plist中添加

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>
七、在Xcode中运行项目

至此就已经完成的项目的配置啦，大家可以在Xcode中运行项目了，并且在webStorm或者你喜欢的工具中编辑index.ios.js进行开发啦！

如果有问题，欢迎大家斧正~
我的Demo地址是TestReactNative

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容