RN集成到现有iOS项目（demo）

2016-11-16 本文已影响226人 Mr_Legend

首先考虑集成到现有的项目，而不是新建一个项目从0->100

那么文件目录是什么样？
需要配置什么？
包含哪些文件？
等实现helloworld之后再回过头看整体的流程是什么样？

Paste_Image.png

这里默认上一篇文章中的配置都已完成。

－－－－配置－－－－

1、安装cocoapods

pod安装：pod init
卸载pod：sudo gem uninstall cocoapods
安装pod：sudo gem install cocoapods pod setup

2、我们把具体的依赖包记录在package.json文件中

{
  "name": "rn_testAddRNIntoProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.0.2",
    "react-native": "0.26.1"
  }
}

安装node_modules/ ,cd到根目录，执行以下命令

npm install

会有这么一个文件夹

Paste_Image.png

3、配置Podfile，创建xcworkspace
初始文件目录（马赛克的地方一开始没有）：

cd 到这个目录，然后：pod init

Paste_Image.png

在项目根目录新建Podfile（已安装pod）如果pod init一直出错，先不用管它，直接创建Podfile文件，编写需要的内容，再pod install就可以了：

运行：pod install

Paste_Image.png

pod 内容：

# 这里写上项目名⬇️
target 'rn_testAddRNIntoProject' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
  ]

end

Subspecs

The list of supported subspec
s are in "node_modules/react-native/React.podspec"
If you want to add the React Native Text library (e.g., for <Text>elements), then you will need the RCTText subspec
If you want the Image library (e.g., for <Image>elements), then you will need the RCTImage subspec

－－－－创建index.ios.js文件－－－－

$ touch index.ios.js

'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,
  },
});

// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

－－－－iOS代码调用RN代码－－－－

这里提醒一句：所有使用<>的地方，都先完整写好<>,再写参数，否则很容易忘记补全，新手已经自坑几次了😭

在测试项目中，什么都没有，不过需要添加一个按钮的点击事件：

#import "RCTRootView.h"

- (IBAction)buttonPress:(id)sender {
    NSLog(@"High Score Button Pressed");
    NSURL *jsCodeLocation = [NSURL
                             URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    RCTRootView *rootView =
    [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                         moduleName        : @"rn_testAddRNIntoProject"
                         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];
}

plist文件中增加以下代码，用于通过https SSL/ATL 安全性验证：

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