Second：React native &OC混编

该篇文章主要分为两部分

• 1.集成过程
• 2.可能遇到的问题（比较蠢的问题）

一：集成过程

1.1首先要有个开发环境吧

具体请移步这篇搭建react native的开发环境的文章

1.2开始集成

以下过程来自React native中文网，我只是提炼了一下。毕竟字数很多。看我这个方便些。

• step1：创建一个oc项目
• step2：按照RN中文网的建议，根目录创建一个/ios文件，用来存放iOS的源码。简单来说就是把所有创建工程时生成的所有东西都丢到/ios里面去。
• step3：在/ios中pod init，创建一个pod文件，用来下载、管理RN所需要的库，并且将以下复制到pod中。具体每一个是做什么用的，可以自行Google。

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTCameraRoll',
    'RCTGeolocation',
    'RCTNetwork',
    'RCTPushNotification',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTLinkingIOS'
  ]

• step4：pod集成完后直接 pod install坐等加载完毕
• step5：回到项目根目录，创建两个文件。分别是package.json和index.ios.js文件。

向package.json文件中复制以下代码：
{
  "name": "NumberTileGame",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "npm": "^6.0.1",
    "react": "15.4.1",
    "react-native": "0.39.2"
  }
}

向index.ios.js文件中写入以下内容(RN中文网的例子)
'use strict';

import React 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);

//注意:这个'RNHighScores'在oc代码中会被调用到，要保持oc代码中调用和这里的书写一致。

• step6:在根目录执行npm install，执行完后，可能会要求更新，这个随意都可以。这个过程会将node_modules下载到根目录中。
• step7：需要配置一下网络设置。打开info.plist，添加以下配置。

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>

• step8：我们要修改一下oc的代码，把RN自带的view加进项目中去。别忘了，导入#import "RCTRootView.h"

因为这里完全按照的是RN中文网去做。可以将一下代码放入ViewController中，放在touchesbegin中就好了。
    [super touchesBegan:touches withEvent:event];
    NSLog(@"High Score Button Pressed");
    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];

• step9：最后一步非常重要，启动你的服务。。（我忘记了这一步导致加载不出来，很蠢的问题）。终端进入根目录，npm start。启动服务即可。
• last step：运行项目即可。xcode run 或者react-native run-ios

二：遇到的问题

2.1 cocoapods找不到头文件

solution：user header search paths 添加${SRCROOT}。

2.2 程序启动就crash，并报错image not found。

solution：这个问题并不是说图片找不到，其实是有些库找不到。只需要移除那些库就可以了。

2.3 如果出现了tcp connect failed

solution：1.请去启动服务 2.配置网络环境。详见step7

三：the end

具体配置不是很难，按照步骤走就没问题。
再次重申：本文章只是根据RN中文网步骤走了一遍，提炼了一下，方便大家看。
因为部门技术栈的原因，公司选型可能会用Weex，毕竟RN的学习成本实在太高，但是RN是一个很好的方向，我会在以后不定期更新学习进度。