使用CocoaPods集成react-native到iOS原生项

参考文档：reactnative文档

reactnative last version: 0.53版本我无力吐槽，0.52表示无能为力，我放弃了。本文是基于0.51版本。

(1) 新建xcode project，名字是ReactNativeDemo。在项目根目录下，新建ReactNative文件夹，用于存放跟reactnative相关文件。

image.png

(2) 打开终端，cd 到 ReactNative文件夹里面，创建package.json文件。

touch package.json

image.png

(3) 打开package.json，输入下面关于reactnative相关配置信息。

{
    "name": "ReactNativeDemo",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start"
    },
    "dependencies": {
      "react": "16.0.0",
      "react-native": "0.51.0"
    }
  }

(4) cd 到ReactNative文件夹里面，安装依赖包

npm install

image.png

安装完会多出两个文件。

image.png

(5) 新建index.js文件，作为reactnative程序入口，之前的版本是index.ios.js

touch index.js

image.png

(6) 在index.js中写测试代码...

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

class ScoresView 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,
    },
  });
  
// 注册组件，程序入口
// 第一个参数：注册模块名称,这里亲测不和项目名一致也可以，但是好多资料说名字要和项目名一致
// 第二个参数：函数，此函数返回组件类名，程序启动就会自动去加载这个组件
AppRegistry.registerComponent('App', () => ScoresView);

(7) cd 到项目根目录，创建profile文件

image.png

(8) pod以下文件：

特殊说明：这里用CxxBridge 代替 BatchedBridge，因为BatchedBridge不久将会被remove掉。

react_native_path：文件路径必须和自己创建的实际文件路径一样

source 'https://github.com/CocoaPods/Specs.git'
react_native_path = './ReactNative/node_modules/react-native'
platform :ios, ‘9.0’
use_frameworks!

target 'ReactNativeDemo' do
# '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

终端执行pod install

pod install

(9) 配置App Transport Security

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

(10) 打开项目，在ViewController随便添加按钮，添加点击事件。

记得导入头文件

#import <React/RCTRootView.h>

添加点击跳转方法：

- (IBAction)pushToReactNativeView:(id)sender {
    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
    
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                                moduleName: @"App"
                         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];
}

⚠️运行会报错：

把#import <fishhook/fishhook.h> 改为 #import "fishhook.h"就好了。

image.png

(11) 打开服务器：

cd到ReactNative文件夹，终端开启服务器：

npm start

image.png

(12) 运行结果：

reactnative.gif