亲自操作了一遍,没有大问题。
我在 pod install 的时候,一直 installling ,永远安装不完 ,最终发现,我把 翻墙软件退出 去就好了
原文地址:http://blog.csdn.net/l863784757/article/details/50592341
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"
- 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文件里粘贴一下代码:
- '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)
- vi run.sh
输入
- #! /bin/bash
- (cd Pods/React; npm run start)
然后给run.sh添加可执行权限:chmod +x run.sh
之后开启服务器时,只需要在终端输入命令:
./run.sh