ReactNative与iOS的混编

ReactNative与iOS的混编

通讯

ReactNative与iOS的通讯
这里头很详细 

嵌入

iOS原生调用嵌入ReactNative

iOS原生调用嵌入ReactNative（English）

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，则程序的启动会有变化：

1. 设置服务器权限：
   
   
   

   打开权限
2. 终端命令进入进入项目根目录，执行 

   $ react-native start

3. 服务器打开后，直接在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');