ReactNative与iOS的混编

2017-01-13 15:18:52来源:http://www.jianshu.com/p/a0618a28a1a4作者:陈小翰人点击

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


设置服务器权限:

打开权限

终端命令进入进入项目根目录,执行
$ 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');



最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台