TAG

RSS订阅

收藏本站

设为首页

当前位置:主页 > 移动开发 > IOS开发 >

React-Native学习之与原生交互

发布时间:2016-12-10 11:51 类别:IOS开发

React-Native学习之与原生交互
一,原生界面跳转RN界面
1.使用命令react-native init HelloWord创建一个HelloWorld的空项目
2.在创建好的React Native项目中添加两个ViewController
OneViewController页面上button的点击事件
- (void)btnClick:(id)sender
{
// 跳转到第二页
  TwoViewController* page = [TwoViewController new];
  [self presentViewController:page animated:YES completion:nil];
}
 
TwoViewController的ViewDidLoad方法中
NSURL* jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
通过URL创建一个RCTRootView,之后将RCTRootView赋值给self.view
  RCTRootView* rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"HelloWorld" initialProperties:nil launchOptions:nil];
  self.view = rootView;
这样点击页面OneViewController的button,就会跳转到RN页面.
 
二、React Native访问调用iOS原生方法
要实现这个功能,我们首先需用创建一个实现"RCTBridgeModule"协议的RNBridgeModule桥接类,看一下RNBridgeModule.h文件
// 引入RCTBridgeModule头文件,并实现RCTBridgeModule协议
#import "RCTBridgeModule.h"
@interface RNBridgeModule : NSObject
 
@end
 
在RNBridgeModule.m文件中添加如下的方法:
RCT_EXPORT_METHOD(RNInvokeOCCallBack:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback){
  NSLog(@"接收到RN传过来的数据为:%@",dictionary);
  NSArray *events = [[NSArray alloc] initWithObjects:@"张三",@"李四", nil];
  callback(@[[NSNull null], events]);
 
}解释:如果原生的方法要被JavaScript进行访问,那么该方法需要使用RCT_EXPORT_METHOD()宏定义进行声明。该声明的RNInvokeOCCallBack方法有两个参数:第一个参数代表从JavaScript传过来的数据,第二个参数是回调方法,通过该回调方法把原生信息发送到JavaScript中。
之后,在index.ios.js文件中添加这段代码,调用封装方法访问即可:
 
// 添加一个button,点击button后调用OC方法
 
           onPress={()=>{RNBridgeModule.RNInvokeOCCallBack(
             {'name':'good','description':'http://www.lcode.org'},
             (error,events)=>{
                 if(error){
                   console.error(error);
                 }else{
                   this.setState({events:events});
                 }
           })}}
         />
 
三, iOS原生访问调用React Native
如果我们需要从iOS原生方法发送数据到JavaScript中,那么使用eventDispatcher。首先我们需要在RCTBridgeModule实现中中引入:
@synthesize bridge = _bridge;
 
之后使用bridge.eventDispatcher sendAppEventWithName进行访问,实例代码如下:
self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@{@"name":[NSString stringWithFormat:@"%@",value],@"errorCode":@"0",@"msg":@"成功"}];
 
之后在index.ios.js中添加如下代码:
import { NativeAppEventEmitter } from 'react-native';
 componentDidMount(){
    subscription = NativeAppEventEmitter.addListener(
         'EventReminder',
          (reminder) => {
            let errorCode=reminder.errorCode;
            if(errorCode===0){
               this.setState({msg:reminder.name});
            }else{
               this.setState({msg:reminder.msg});
            }
          }
         );
  }
其实可以给这种方式理解成OC中的通知机制,现在RN使用NativeAppEventEmitter.addListener中注册一个通知,之后再OC中通过bridge.eventDispatcher sendAppEventWithName发送一个通知,这样就形成了调用关系。
 参考文档:http://www.lcode.org/react-native-进阶之原生混合与数据通信开发详解-适配ios/
猜你会喜欢....

Copyright © 2015 www.wahenzan.com 哇!很赞 版权所有 浙ICP备14030256号-1 Power by DedeCms

浙公网安备 33010602005986号

声明:本站所有文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除 网站管理员:758763728

360网站安全检测平台