iOS原生项目中集成React Native
2016-05-24 16:47
405 查看
亲自操作了一遍,没有大问题。
我在 pod install 的时候,一直 installling ,永远安装不完 ,最终发现,我把 翻墙软件退出 去就好了
原文地址:http://blog.csdn.net/l863784757/article/details/50592341
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境。
2.使用Xcode新建一个工程。EmbedRNMeituan
[图1]
3.使用CocoaPods安装React Native
在工程目录下新建Podfile文件,并配置需要使用的第三方库
[objc] view
plain copy
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"
platform :ios, '7.0'
注:如果你需要在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文件里粘贴一下代码:
[javascript] view
plain copy
'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中
[objc] view
plain copy
#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启动服务器
工程目录下,终端输入:
[html] view
plain copy
(cd Pods/React; npm run start)
6.3编写脚本文件run.sh
[html] view
plain copy
vi run.sh
输入
[html] view
plain copy
#! /bin/bash
(cd Pods/React; npm run start)
然后给run.sh添加可执行权限:chmod +x run.sh
之后开启服务器时,只需要在终端输入命令: ./run.sh
我在 pod install 的时候,一直 installling ,永远安装不完 ,最终发现,我把 翻墙软件退出 去就好了
原文地址:http://blog.csdn.net/l863784757/article/details/50592341
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境。
2.使用Xcode新建一个工程。EmbedRNMeituan
[图1]
3.使用CocoaPods安装React Native
在工程目录下新建Podfile文件,并配置需要使用的第三方库
[objc] view
plain copy
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"
platform :ios, '7.0'
注:如果你需要在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文件里粘贴一下代码:
[javascript] view
plain copy
'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中
[objc] view
plain copy
#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启动服务器
工程目录下,终端输入:
[html] view
plain copy
(cd Pods/React; npm run start)
6.3编写脚本文件run.sh
[html] view
plain copy
vi run.sh
输入
[html] view
plain copy
#! /bin/bash
(cd Pods/React; npm run start)
然后给run.sh添加可执行权限:chmod +x run.sh
之后开启服务器时,只需要在终端输入命令: ./run.sh
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 讲解iOS开发中基本的定位功能实现
- iOS中定位当前位置坐标及转换为火星坐标的方法
- js判断客户端是iOS还是Android等移动终端的方法
- iOS应用开发中AFNetworking库的常用HTTP操作方法小结
- iOS应用中UISearchDisplayController搜索效果的用法
- IOS开发环境windows化攻略
- iOS应用中UITableView左滑自定义选项及批量删除的实现
- iOS中UIAlertView警告框组件的使用教程
- 浅析iOS应用开发中线程间的通信与线程安全问题
- 检测iOS设备是否越狱的方法
- .net平台推送ios消息的实现方法
- 探讨Android与iOS,我们将何去何从?
- Android、iOS和Windows Phone中的推送技术详解