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: ,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: ,
textAlign: 'center',
margin: ,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: ,
},
}); 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(, , , );
[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的更多相关文章

  1. react native 之 在现有的iOS工程中集成react native

    在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...

  2. iOS原生项目集成React Native模块

    今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...

  3. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  4. Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误

    Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...

  5. 现有项目中集成Flutter

    本文列举了项目开发使用Flutter会遇到的问题,以及如何使用Flutter module在现有项目中集成Flutter,并对其原理进行了分析. 最近在做的一个商业项目,完全的使用Flutter编写的 ...

  6. unity导出工程导入到iOS原生工程中详细步骤

    一直想抽空整理一下unity原生工程导入iOS原生工程中的详细步骤.做iOS+vuforia+unity开发这么长时间了.从最初的小小白到现在的小白.中间趟过了好多的坑.也有一些的小小收货.做一个喜欢 ...

  7. 在ASP.NET MVC项目中使用React

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:最近在开发钉钉的微应用,考虑到性能和UI库的支持,遂采用了React来开发前端. 目前 ...

  8. SpringBoot12 QueryDSL01之QueryDSL介绍、springBoot项目中集成QueryDSL

    1 QueryDSL介绍 1.1 背景 QueryDSL的诞生解决了HQL查询类型安全方面的缺陷:HQL查询的扩展需要用字符串拼接的方式进行,这往往会导致代码的阅读困难:通过字符串对域类型和属性的不安 ...

  9. Java Web学习系列——Maven Web项目中集成使用Spring、MyBatis实现对MySQL的数据访问

    本篇内容还是建立在上一篇Java Web学习系列——Maven Web项目中集成使用Spring基础之上,对之前的Maven Web项目进行升级改造,实现对MySQL的数据访问. 添加依赖Jar包 这 ...

随机推荐

  1. android加固系列—2.加固前先要学会破解,调试内存值修改程序走向

    [版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5138585.html] 因公司项目需要对app加固,经过本人数月的研究,实现了一套完整的仿第三 ...

  2. NSArray与NSMutableArray 数组与可变数组

    1.NSArray 是一个父类,NSMUtableArray是其子类,他们构成了OC的数组.2.NSArray的创建NSArray * array = [[NSArray alloc]initWith ...

  3. IOS之UI--动态设置NavigationBar的颜色以及透明度

    前言:有时候我们需要设置UINavigationController的导航条NavigationBar的颜色为透明度,这时候就需要使用到NavigationBar的barStyle这个属性: 再看QQ ...

  4. php设计模式 数据对象映射模式

    数据对象映射模式,是将对象和数据存储映射起来,对一个对象的操作会映射为对数据存储的操作. 在代码中实现数据对象映射模式,实现一个ORM类,将复杂的sql语句映射成对象属性的操作.对象关系映射(Obje ...

  5. MVC3异常处理的方法

    1.采用内置的HandleErrorAttribute对象,跳转到指定错误页 示例:http://www.cnblogs.com/TomXu/archive/2011/12/15/2285432.ht ...

  6. SSH新学

    流程:model-->dao-->service-->impService-->action 如果只是操作单个的一个表,比如user表,则都写到user的流程中 如果要操作俩个 ...

  7. 在JSP动态网页中输出九九乘法表

    <% StringBuffer sb = new StringBuffer(); ; i <= ; i++){ ; j <= i; j++){ sb.append(j + " ...

  8. 关于字符串查找 charindex ,Patindex 还有一个like

    字符串查找.在模糊朝找的情况下,其实3者的效率是差不多的.都需要一个一个取出来然后扫一遍╮(╯_╰)╭.然而用法还是会有一点儿的区别 1 charindex (查找的字符串,字符串表达式[,开始查找的 ...

  9. sqlyog不用密码登陆(强制取消)

    1.启用命令行.cd ../返回磁盘根目录.输入D: 进入D盘.dir可以显示所以文件夹. 2.在D盘找到mysql安装目录的bin文件夹 cd /xampp/mysql/bin 3.然后输入命令'm ...

  10. openwrt修改flash大小

    前言 默认openwrt trunk编译出来的flash大小为8M,但是我们手上的板子可能flash大小更大,本文以MT7620a为例,将其flash大小由8M修改为16M或者32M 增加dts文件 ...