React Native常用功能开发总结（IOS）

JerryC 发布于2019-06-25 15:32 / 244人阅读

摘要：为函数名称，设置这个主要是为了将多个暴露方法统一管理。调用如下原生如何直接调用有时候单原生触发了某一操作时，应用需要响应，然后执行相应的操作。

一.RN如何调用原生方法

1. 原生暴露方法(这里myclass为暴露原生方法模块)

//myclass.h (所有提供给RN使用的方法都得继承RCTBridgeModule类)

#import 
#import "RCTBridgeModule.h"

@interface MyClass : NSObject

@end

//myclass.m
#import "MyClass.h"
#import "RCTBridge.h"

@implementation MyClass
@synthesize bridge = _bridge;

//暴露模块
RCT_EXPORT_MODULE();

//暴露方法（这里暴露了addEvent方法。 actionType为函数名称，设置这个主要是为了将多个暴露方法统一管理。propertyDic为RN调用时传入的参数）
RCT_EXPORT_METHOD(addEvent:(NSString *)actionType actionName:(NSString *)actionName propertyDic:(NSDictionary*)propertyDic callbackEvents:(RCTResponseSenderBlock)callback)
{
  if ([actionType isEqualToString:@"Nav"]) {
      KTVListenWorkVC* vc = [[KTVListenWorkVC alloc] init];
      vc.opusId = [propertyDic[@"opusId"] longLongValue];
      [[KGMainViewController shareMainViewController] pushViewControllerToKGNavigation:vc animated:YES];
      
  }else if([actionType isEqualToString:@"http"]){
      KTVHttpPostRequstData * postHttpRequstData = [[KTVHttpPostRequstData alloc] init];
      postHttpRequstData.requstDic = propertyDic;
      callback(@[[postHttpRequstData toRequstURL]]);
  }
}

2. js调用原生方法
import {NativeModules} from "react-native";
var nativeMethod = NativeModules.MyClass;

//第一个参数为原生暴露的方法名， 第二个参数随便写， 第三个是回调函数（data为执行原生方法后返回的参数）
nativeMethod.addEvent("http", "aaaa", function(data){
    callback()
}

二.如何实现RN跳转到原生页面

//其实RN跳转原生的原理比较简单，在ios中就是初始化一个类，也就是上面暴露的Nav方法。

js调用如下
nativeMethod.addEvent("Nav", "aaaa", {"opusId": this.props.opusId}, function(){})

原生如何直接调用RN

有时候单原生触发了某一操作时，RN应用需要响应，然后执行相应的操作。这里分两个步骤：

1.RN注册监听事件
//首页导入监听事件模块并注册监听事件（这里其实有多个模块可以调用，详细可以看RCTEventDispatcher文件源码）

import RCTNativeAppEventEmitter from "RCTNativeAppEventEmitter"; 

//这个方法是单城市选择改变时，显示的数据实时改变
RCTNativeAppEventEmitter.addListener("changeCityCode",function(result){
     ......
})

2 原生派发事件（在myclass尾部加入下面代码，并导入RCTEventDispatcher模块）
#import "RCTEventDispatcher.h"

//重写bridge方法
- (void)setBridge:(RCTBridge *)bridge {
    _bridge = bridge;
    [[NSNotificationCenter defaultCenter] addObserver:self
                                             selector:@selector(receiveCityChangeNotifaction:)
                                                 name:KTV_CHANGE_CITY_NOTYFY
                                               object:nil];
    
}
- (void)receiveCityChangeNotifaction: (NSNotification *)notify
{
    
    NSDictionary * info = notify.userInfo;
    KTVCityModel * city = [info objectForKey:@"selectedCity"];
    if (city && [city isKindOfClass:[KTVCityModel class]]) {
    
    
    NSDictionary * notifyInfo = [NSDictionary dictionaryWithObjectsAndKeys: [NSNumber numberWithInteger: city.cityCode], @"citycode", nil];
    
    [self.bridge.eventDispatcher sendAppEventWithName:@"changeCityCode" body:notifyInfo];
    }
}
@end

应用场景如下，上面红色框部分为原生的，RN应用是嵌入到原生试图的，当原生改变城市时，RN的数据需要重新渲染。

三.如何调用原生组件

四.常见错误解决方式

后续会继续补充，如有错误的地方，还请小伙伴们指出一起交流，谢谢~
源码地址:点这里

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/16382.html

React Native常用功能开发总结（IOS）

摘要：为函数名称，设置这个主要是为了将多个暴露方法统一管理。调用如下原生如何直接调用有时候单原生触发了某一操作时，应用需要响应，然后执行相应的操作。一.RN如何调用原生方法 1. 原生暴露方法(这里myclass为暴露原生方法模块) //myclass.h (所有提供给RN使用的方法都得继承RCTBridgeModule类) #import #import RCTBridgeModu...

Ocean 2019-08-22 10:35 评论0 收藏0
React Native ios打包

摘要：打包离线资源需要使用命令注文中使用的项目名称为的命令是用来进行打包的命令，的详细命令选项。开发React Native的过程成,js代码和图片资源运行在一个Debug Server上，每次更新代码之后只需要使用command+R键刷新就可以看到代码的更改，这种方式对于调试来说是非常方便的。但当我们需要发布App到App Store的时候就需要打包,使用离线的js代码和图片。这就需要把...

fou7 2019-06-25 15:35 评论0 收藏0
Android混合开发

摘要：另外已经开始报名，定于月日在上海举行，早鸟票已售罄，想去的抓紧时间报名。和相互调用当前的开发中，会使用大量的甚至出现了混合开发模式，使用开发，页面开发效率高和移植便利性为主。前端周刊第 52 期：JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边哈哈，互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口，讨论这件事情的文章很多，前端周刊就没有收录...

张巨伟 2019-06-25 11:47 评论0 收藏0
用Weex开发的V2EX三端app，附探坑总结

摘要：项目地址传送门内附项目预览环境配置客户端的安装调试工具依赖环境探坑总结无法渲染文本需使用不支持富文本，需单独封装不支持，层级靠后优先表达式需使用数组形式，否则会报错无法简写例不支持，需各写属性不支持操作原生滑动事件不支持嵌套和项目地址 git传送门（内附项目预览） Weex环境配置 npm install -g weex npm install -g weexpack # weex...

hedge_hog 2019-08-20 17:44 评论0 收藏0
用Weex开发的V2EX三端app，附探坑总结

摘要：项目地址传送门内附项目预览环境配置客户端的安装调试工具依赖环境探坑总结无法渲染文本需使用不支持富文本，需单独封装不支持，层级靠后优先表达式需使用数组形式，否则会报错无法简写例不支持，需各写属性不支持操作原生滑动事件不支持嵌套和项目地址 git传送门（内附项目预览） Weex环境配置 npm install -g weex npm install -g weexpack # weex...

niuxiaowei111 2019-08-05 17:55 评论0 收藏0