向原有项目中集成React-Native

之前的文章中讲解Node以及React的基本知识，本文就着重讲一下如何向现有项目中集成React-Native。
众所周知，我们集成React-Native的目的是在本地编辑JS文件即可实现多端并用（比如iOS、Android等）。而JS文件即是通过React-Native的某个方法加载的。我们不妨看一下最终在我们本地项目中加载JS文件的代码：

NSString * strUrl = @"http://localhost:8081/index.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"Shop" initialProperties:nil launchOptions:nil];
rootView.frame = self.view.bounds;
rootView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:rootView];

这是我们在某个ViewController的ViewDidLoad方法中加载JS文件所使用的方法，大概意思就是通过加载URL地址为：http://localhost:8081/index.bundle?platform=ios&dev=true的文件来实现加载指定的JS文件。当然，这里的RCTRootView就是我们需要导入的React-Native库文件中包含的类。

既然我们依赖React-Native库，那就需要在PodFile中指定，这里我们指定如下：

pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'RCTText’,
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket',
    'DevSupport',
    'CxxBridge',
    ]
pod "yoga", :path => './node_modules/react-native/ReactCommon/yoga'

我们可以看到，这里有两个库React和yoga。并且这两个库的路径都在本地的node_modules目录下。
那node_modules是什么目录呢，毫无疑问，npm的依赖库目录就是它。因此我们只需要在pod install前执行npm install即可。
讲解了原理，这里我们把步骤详细描述一遍。

以我们的Shop项目为例
1.在Shop目录下创建package.json文件

{
  "name": "shop",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.2",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "babel-jest": "23.0.0-alpha.0",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.2",
    "react-test-renderer": "^16.3.0-alpha.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

2.运行命令npm install命令。这样就创建了node_modules目录，并包含了React—Native等三方库。

3.在Podfile中添加React-Native依赖，并执行pod update命令
4.在项目的某个ViewController的ViewDidLoad中添加代码，用于引入React—Native

NSString * strUrl = @"http://localhost:8081/index.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"Shop" initialProperties:nil launchOptions:nil];
rootView.frame = self.view.bounds;
rootView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:rootView];

5. 在项目根目录中创建文件index.js，并输入以下代码：

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

class Shop extends Component {
  render() {
    return (
        
            
                   iOS提交资料
                   13312345678
            

             
              
                
                    
                    {item.key}
                
                
                    {item.title && {item.title}}
                    
                
              
          }
            />
      

    );
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    top: 50,
        paddingLeft: 15,
        paddingRight: 15,
  },

  top: {
    position: 'relative',
    top: 10,
        left: 145,
    },
    topText: {
        fontWeight: 'bold',
        fontSize: 18,
        marginBottom:6
    },
  list: {
    position: 'relative',
    top: 100,
        left: 0,
  },
  item: {
    position: 'relative',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height:55,
  },
  leftIcon:{
    width: 20,
        height: 20,
  },
  itemText: {
        textAlign: 'center',
        left:10,
        top:4,
        fontSize: 14,
  },
  itemLeft: {
    flexDirection: 'row',
  },
  itemRight: {
    flexDirection: 'row',
    },
    rightIcon:{
    width: 10,
        height: 10,
        marginLeft:8,
        marginRight:8
  },
})

//  项目名要有所对应
AppRegistry.registerComponent('Shop', () => Shop);

6.在项目根目录中执行npm start命令。即可看到如下页面：

效果图

参考

npm 与 package.json 快速入门教程

ios原生项目集成reactnative步骤（RN学习一）

在iOS中创建React-Native页面，并跳转到原生页面