iOS React Native 混合开发集成React Native

序：

有时候我们并不是需要全部使用React Native,我们想和原生混合开发，那我们应该怎么办呢。

先看一下我集成完之后的项目目录：

首先安装React Native node组件

1、新建一个文件夹如目录中的RN，这个文件夹用于存放React Native相关内容

2、新建一个package.json用于安装node_modules。package.json内容如下：

{ "name": "RNHybrid", //记得修改项目的名字 "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.0" }, "devDependencies": { "babel-jest": "20.0.3", "babel-preset-react-native": "1.9.2", "jest": "20.0.4", "react-test-renderer": "16.0.0-alpha.6" }, "jest": { "preset": "react-native" } }

3、cd 你的项目路径，然后执行 nmp install。如下图：

执行完上面的命令之后，打开你的项目目录下，你就会发现node_modules都下载到你新建的文件夹中了，如图：

4、在新建的目录下新建index.ios.js,把之前React Native的例子拷过来就可以，记得改下modules的名字

代码语言：javascript复制

/**
 * 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 RNHybrid extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          iOS 原生 RN混合开发!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

Cocospod安装React Native

既然大家都来看RN了。cocospod就不用讲了吧。

1、podfile我们要加入的内容

路径填写你存放node_modules的路径即可。

pod 'Yoga', :path => ‘./RN/node_modules/react-native/ReactCommon/yoga' pod 'React', :path => ‘./RN/node_modules/react-native', :subspecs => [ 'Core', 'RCTText', 'RCTNetwork’, 'RCTWebSocket', ]

因为Core依赖于Yoga所以要添加一下，至于项目中需要什么组件以后可以在subspecs依次添加。

2、然后pod install就行了，比较慢，你可以撸一把了。

3、成功之后，我们来用一下吧，我们可以在原生项目中加入RN界面试试。

NSURL *jsCodeLocation;

jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

RCTRootView *rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation

moduleName:@"RNHybrid"

initialProperties:nil

launchOptions:nil];

rootView.frame =CGRectMake(0,0,[UIScreenmainScreen].bounds.size.width, [UIScreenmainScreen].bounds.size.height);

[self.viewaddSubview:rootView];

下面代码大家有疑惑的估计就是这个url从哪来的，下面当你启动的时候，会告诉你。