React-Native / iOS 混编入原生项目

一脸懵逼：吐槽前言

后面慢慢吐槽

感谢前人分享经验系列 ：React-Native 资料

React-Native中文网

iOS 和 Android 开发的 React Native 入门指南

iOSer迈向前端一小步--OC/Swift与RN混编Demo (这里面有OC\RN混编的项目搭建Demo)

（后面如有用到有用的继续补充）

环境配置与项目搭建

环境配置与纯RN搭建看这个就行了

iOS中 RN与OC项目混编 （两个关键文件配置）

• package.json
• Podfile

package.json

{
  "name": "RNProjectName",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.4.2",
    "react-native": "0.41.2"
  }
}

name    项目名称
version     版本（遵守‘大版本.次要版本.小版本’的格式）

package.json详解

// 终端中
➜  app-iv3 git:(dev_2.7.2_Dombo_RN) ✗ ls
INTERNATIONAL_README laoyuegou            package-lock.json
README               node_modules         package.json

➜  app-iv3 git:(dev_2.7.2_Dombo_RN) ✗ npm install

cd 到 package.json 所在的文件目录下
npm install 

安装完成后会有一个 node_modules 文件夹

---

Podfile

#  ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ======
        pod 'React', :path => ‘../node_modules/react-native', :subspecs => [
        'Core',
        'RCTImage',
        'RCTNetwork',
        'RCTText',
        'RCTWebSocket',
        ]
# 根据需求添加项目中需要的模块
# path 这里要正确设置 node_modules/react-native 的所在路径，每个人不一样

配置完后，pod install 即可安装 React-Native 所以来的相关组件库

React-Native 咋用呢

// 倒入头文件
#import <React/RCTRootView.h>

// 
NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
                             
// 传给RN的参数必须是字典类型，要和js代码propertis一致
NSDictionary *params = @{@"scores" : @[
                                     @{@"name" : @"Alex",
                                         @"value": @"42"},
                                     @{@"name" : @"Joel",
                                         @"value": @"10"}
                                     ]
                             };
    // moduleName 要对应index.ios.js 上的 AppRegistry module
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                                                 moduleName        : @"RNTestViewModule"
                                                 initialProperties : params
                                                  launchOptions    : nil];
                                                
// 去掉返回箭头的title
UIBarButtonItem *item = [[UIBarButtonItem alloc] init];
item.title = @"";
self.navigationItem.backBarButtonItem = item;
       
UIViewController *viewController = [UIViewController new];
viewController.view = rootView;
viewController.title = @"承载RN视图的VC";
[self.navigationController pushViewController:viewController animated:YES];

---

React-Native 0.45.0 以上版本需要下载boost等几个第三方库编译（是需要终端fan qiang的，否则超时失败）

• package.json
• Podfile

package.json

{
  "name": "RNProjectName",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.56.0"
  }
}

Podfile.json

# Uncomment the next line to define a global platform for your project
react_native_path = './Extern/ReactNative/node_modules/react-native'

platform :ios, '9.0'
inhibit_all_warnings!

target 'RNProject' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

    # 'node_modules'目录一般位于根目录中
    # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
    pod 'React', :path => react_native_path, :subspecs => [
    'Core',
    #'BatchedBridge', # 0.45 版本以后需要添加
    'CxxBridge',
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTImage',
    'RCTNetwork',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
    ]
    # 如果你的RN版本 >= 0.42.0，则加入下面这行
    pod 'yoga', :path => react_native_path + '/ReactCommon/yoga'
    # Third party deps
    pod 'DoubleConversion', :podspec => react_native_path + '/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => react_native_path + '/third-party-podspecs/glog.podspec'
    pod 'Folly', :podspec => react_native_path + '/third-party-podspecs/Folly.podspec'
end

剩下步骤跟part1 中的一样不再描述

---

运行

终端cd 到 package.json 文件下

如果是adb断了就使用一下步骤

1. adb reverse tcp:8081 tcp:8081
2. npm start
   如果adb没断,直接
3. npm start

---

RN报错与解决方案：
1、Argument list too long: recursive header expansion failed at
解决：查到的一些方法太好使，'node_modules'目录一般放于根目录中，不要放太深层的路径即可

2018-7-24更新，后续再补

---

IDE：Visual Studio Code

Visual studio Code 写RN所需要的插件