[ES6-iOSCode]React-Native移植原生iOS项目里

此文章非网上那些直接翻译没有经过实践的文章

项目Demo下载: http://pan.baidu.com/s/1dEZQWyH 密码: m89h

第一部分:配置处理

1.CocoPods导入相关依赖库(pod上面最新RN版本就0.13.0版本只支持ES5语法)

CocoPods是iOS/Mac开发中的包管理器，我们需要使用CocoaPods来进行下载React Native。(不会使用pod请百度)
当你用CocoaPods进行工作的时候，需要往Podfile文件中添加如下的一些代码信息,创建Podfile文件命令,先cd iOS项目根目录再执行命令.

touch Podfile

2.Podfile文件写入相关代码

Rn_iostaoge是原生项目名称

platform :ios, ‘7.0’

target "Rn_iostaoge" do
pod 'React’
pod "React/RCTText"
pod "React/RCTActionSheet"
pod "React/RCTGeolocation"
pod "React/RCTImage"
pod "React/RCTLinkingIOS"
pod "React/RCTNetwork"
pod "React/RCTSettings"
pod "React/RCTVibration"
pod "React/RCTWebSocket"
end

3.创建React Native应用(代码是ES5语法,RN版本太低没办法)

创建index.ios.js在根目录下

touch index.ios.js

index.ios.js写入以下代码

'use strict';
 
import React, {
  Text,
  View
} from 'react-native';
 
conststyles = React.StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  }
});
 
class SimpleApp extends React.Component {
  render() {
    return (
      
        This is a simple application.
      
    )
  }
}
 
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

上面代码中的SimpeApp就是你的模块名称，原生iOS建立访问链接的时候需要

第二部分:iOS原生项目需要做的处理

1.我们需要创建一个派生类ReactView 名字随便起

在init...frame方法里写入

-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {

                NSURL *jsLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
                RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsLocation moduleName:@"SimpleApp" initialProperties:nil launchOptions:nil];
                self.rootView = rootView;
                [self addSubview:rootView];
    }
    return self;
    
}

2.在主窗口控制器里ViewDidLoad里声明载入视图(具体看Demo)

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    ReactView *rootView = [[ReactView alloc]initWithFrame:CGRectMake(110, 110, 220, 220)];
    
    [self.view addSubview:rootView];
}

3.启动React里的packager

[email protected]

cd进入react目录 执行以下命令

npm run start 

效果:

[email protected]

4.Command+R模拟器走起

效果:

[email protected]