ReactNative与iOS的混编
通讯
ReactNative与iOS的通讯
这里头很详细
嵌入
iOS原生调用嵌入ReactNative
1. cd到项目的根目录下
cd到项目的根目录下
2. 添加依赖包-->到了这里，有两个选择(推荐第二个)
选择 ① :(官方)
（1）根据下图，创建package.json,这个是包含着你要抓取的依赖包的版本等信息,相当于请求参数,去请求一个react_native对应的资源包
添加package.json
(2) 在终端运行 (此时终端还在项目的根目录上)
$ npm install
选择② ：
在你的旧项目或者在任意路径上运行:
react-native init #任意空项目名
创建新的空项目，把项目中的 node_modules文件夹整个复制到你的项目的根目录中
ps:
无论哪种方法，目的都是拿到依赖包node_modules
集成cocoaPod
集成cocoapod，不会请百度或者简书搜索（iOS开发者的基本技能,不废话，看到这里不会的话，在此断点，请调用了相关知识再回调回来）。
在podfile中，增加以下代码
pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# 添加其他你想在工程中使用的依赖。
]
end
注意：path对应着react-native的路径，有的人不喜欢把node_modules放在根目录，则对应自己需要调整path的路径内容
react-native代码准备
1) 创建一个文件夹来保存你的React代码，然后创建一个index.ios.js文件:
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js
2）导入相关静态了库，添加相关frameworks文件:
按步骤添加
在react-native注册输出
在index.ios.js中编写：
在index.ios.js中编写
在原生项目中导入
导入reactNative的内容
程序的启动
一旦使用了rn，则程序的启动会有变化：
-
设置服务器权限：
打开权限 - 终端命令进入进入项目根目录，执行
$ react-native start
- 服务器打开后，直接在xcode上command+R 运行程序
ps:
如果build错误：
_refreshControl报错
解决方法:
添加上面代码
运行结果
原生页
RN页面
ReactNative嵌入iOS原生
1、创建原生模块，实现“RCTBridgeModule”协议
#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface NativeLogin : NSObject <RCTBridgeModule>
@end
2、在原生的类中实现
#import "NativeLogin.h"
@implementation NativeLogin
//导出模块
RCT_EXPORT_MODULE(); //此处不添加参数即默认为这个OC类的名字
//导出方法，桥接到js的方法返回值类型必须是void
RCT_EXPORT_METHOD(pushToLoginWithTitle:(NSString *)name)
{
NSLog(@"loginTitle:%@",name);
//在此处可以跳转你想跳转的页面
UINavigationController *controller = (UINavigationController*)[[[UIApplication sharedApplication] keyWindow] rootViewController];
UIViewController *loginVC = [[UIViewController alloc] init];
login.title = name;
[controller pushViewController:loginVC animated:YES];
}
@end
3、js文件中调用
//创建原生模块实例
var loginModule = require('react-native').NativeModules.NativeLogin;
//方法调用
loginModule. pushToLoginWithTitle('Login');
