iOS项目集成React Native(0.53.3)--Coc

这里就不多说cocoapods的安装了,如果没有React Native的开发环境，可以参考官网的教程

上面的环境安装完成以后,用终端进入到你当前项目的根目录创建一个package.json的文件

$ touch package.json

在package.json中输入一下内容

{
  "name": "LYDemo", //项目名称
  "version": "0.0.1", //这个感觉没什么实际意义
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.2.0",
    "react-native": "0.53.3",
    "react-navigation": "^1.4.0"
  },
  "devDependencies": {
    "babel-jest": "22.4.1",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.2",
    "react-test-renderer": "16.2.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

在项目根目录下执行如下命令

$ npm install

安装好React Native需要的框架以后再Podfile文件中加入如下的三方库

    # 'node_modules'目录一般位于根目录中
    # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
    #记得此处的路径，如果你有创建一个新的文件夹存放这些文件，前面要加上你文件夹的名字：'../RNComponent/node_modules/react-native'，如果没有，直接如下创建即可。
    pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'BatchedBridge', # 0.45 版本以后需要添加
    'RCTText',
    'RCTImage', #这个库主要是为了使用<Image>标签
    'DevSupport',
    'RCTAnimation', #如果不加入这个的话在使用<TouchableOpacity>等触摸事件的时候会出现告警
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
    ]
    # 如果你的RN版本 >= 0.42.0，请加入下面这行
    # 该版本号是package.json中的“dependencies”字典下面的“react-native”后面对应的内容
    pod "yoga", :path => "./node_modules/react-native/ReactCommon/yoga" #相当于读取本地的库

Podfile配置好以后直接运行

$ pod install

这个时候集成React Native的环境就算差不完成了
可能会出现一些报错 比如 'algorithm' file not found 可参看#17764

./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h 文件下
删除 #import <RCTAnimation/RCTValueAnimatedNode.h>
增加 #import "RCTValueAnimatedNode.h"

./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m 文件下
删除 #import <fishhook/fishhook.h>
增加 #import <React/fishhook.h>

./node_modules/react-native/ReactCommon/yoga/yoga.podspec 文件下

   source_files = 'yoga/**/*.{cpp,h}'
   source_files = File.join('ReactCommon/yoga', source_files) if ENV['INSTALL_YOGA_WITHOUT_PATH_OPTION']
   spec.source_files = source_files
这个位置增加如下代码
  # Only expose the needed headers
  spec.public_header_files = 'yoga/Yoga.h', 'yoga/YGEnums.h', 'yoga/YGMacros.h'

 end

在根目录下创建 index.js 添加如下内容

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

class App extends Component {
    render() {
        return (
          <View style={styles.rootViewStyle}>
            <Text style = {styles.textStyle}>
              {this.props["datas"]}
            </Text>
          </View>
        );
    }
}

const styles = StyleSheet.create({
    rootViewStyle: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    textStyle: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

// 整体js模块的名称
AppRegistry.registerComponent('LYDemo', () => App);

在ios项目里面新建一个VC，在VC中引入#import <React/RCTRootView.h>头文件

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
//这里的index就是指的js文件，相当于这里是可以访问其他的js文件的，但是js文件中要写AppRegistry.registerComponent('LYDemo', () => 类名);
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://192.168.31.120:8081/index.bundle?platform=ios&dev=true"]; //这里如果用模拟器话可以写http://localhost:8081/ 如果是真机就必须写成你本机ip 不然就连接不到服务器

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"KuaiQi"
                                                 initialProperties:@{
                                                                     @"datas" : @"Hello World"
                                                                     }
                                                     launchOptions:nil];
    rootView.backgroundColor = [UIColor redColor];
    [self.view addSubview:rootView];

    [rootView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.left.right.mas_equalTo(self.view);
    }];
}

在项目的根目录下运行本地服务器，服务器开启以后之间运行xcode即可

$ npm start