iOS原生项目中集成React Native

react

1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境。

2.使用Xcode新建一个工程。EmbedRNMeituan

[图1]

3.使用CocoaPods安装React Native

在工程目录下新建Podfile文件,并配置需要使用的第三方库

pod 'React', '0.13.0-rc'  

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"

注:如果你需要在React Native中使用<Text>,就需要添加   pod"React/RCTText”,否则不能用

 

然后安装:  pod install

 

这一步会比较慢

安装完成后,添加 Search Paths

输入$(PODS_ROOT),选择recursive

【图2】

编译一下,会报一个错,提示路径太长

Argument list too long: recursive header expansion failed at /Users/***/EmbedRNMeituan/Pods/React/node_modules/jest-cli/node_modules/istanbul/node_modules/escodegen/node_modules/estraverse.

 

这里需要修改刚才的设置,将 $(PODS_ROOT) 改成 $(PODS_ROOT)/React/React

 

再次编译,成功。

4.在工程目录下新建Components文件夹,和index.ios.js文件

【图3】

并在index.ios.js文件里粘贴一下代码:

'use strict';  

var React = require('react-native');

var {

AppRegistry,

StyleSheet,

Text,

View,

} = React;

var EmbedRNMeituan = React.createClass({

render: function() {

return (

<View style={styles.container}>

<Text style={styles.welcome}>

Welcome to React Native!

</Text>

<Text style={styles.instructions}>

To get started, edit index.android.js

</Text>

<Text style={styles.instructions}>

Shake or press menu button for dev menu

</Text>

</View>

);

}

});

var styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

},

welcome: {

fontSize: 20,

textAlign: 'center',

margin: 10,

},

instructions: {

textAlign: 'center',

color: '#333333',

marginBottom: 5,

},

});

AppRegistry.registerComponent('EmbedRNMeituan', () => EmbedRNMeituan);

以上,React Native部分已经弄完。下面开始原生部分。

  

5.新建显示React Native的UIView。

 

用来加载显示React Native的容器是 RCTRootView,它是继承自UIView。

 

在ViewController.m中

#import "RCTRootView.h"  

- (void)viewDidLoad {

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

[self initRNView];

}

-(void)initRNView {

NSURL *jsCodeLocation;

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation

moduleName:@"EmbedRNMeituan"

initialProperties:nil

launchOptions:nil];

//注意,这里是 @"EmbedRNMeituan"

rootView.frame = CGRectMake(0, 64, 300, 300);

[self.view addSubview:rootView];

}

6.运行

 此时如果运行的话,会出现下面的情况

【图4】

提示找不到服务器,以及数据传输的安全问题。

6.1允许http请求

打开info.plist文件,添加

【图5】

App Transport Security Settings    -》 Dictionary

          Allow Arbitrary Loads          -》 YES

6.2启动服务器

工程目录下,终端输入:

(cd Pods/React; npm run start)

6.3编写脚本文件run.sh

vi run.sh

输入

#! /bin/bash  

(cd Pods/React; npm run start)

然后给run.sh添加可执行权限:chmod +x run.sh

之后开启服务器时,只需要在终端输入命令: ./run.sh

 

链接:

iOS原生项目中集成React Native

React-Native入门指南(二)——代码结构

深入浅出 React Native:使用 JavaScript 构建原生应用

ReactNative集成到已有工程中-IOS

在现有App项目中使用React-Native(译)

以上是 iOS原生项目中集成React Native 的全部内容, 来源链接: utcz.com/z/383440.html

回到顶部