オリジナルリンクリアクトネイティブは、スクリーニング機能ルームの検索リストで達成（3）
前の二つの記事では、既にプルダウンリフレッシュを実装し、LACは、より多くのReduxのリストとどのように一方向のデータフローを使用する方法をアップロードし、これがされる最後のモジュールは、次スクリーニング機能の開発を紹介する、すなわちネイティブに反応することをサポートする方法について説明しますiOSのネイティブとのコミュニケーション。
作業を始める、または達成し、最終的な結果を見る前に
ネイティブのiOSと通信する方法についてはネイティブ反応し、非常に明確なチュートリアルの公式ウェブサイトがありますが、私はここでは詳しく説明しません。私はそのような効果を達成するために、これらのインタフェースを使用する主な方法を共有しています。
プロジェクトでは、スクリーニングストリップと対応するサブメニューがネイティブコード実装を使用して、リストのjsコードの実装を使用しています。私たちはしなければならないページのjsブリッジのようにして元のページにこれらを追加することです。
で実装ブリッジングFHTFilterMenuManager次のように実装され、このクラス：
- 達成するネイティブ
// .h
#import <React/RCTViewManager.h>
#import "FHTFilterMenu.h"
@interface FHTFilterMenu (RNBridge)
@property (nonatomic, copy) RCTBubblingEventBlock onUpdateParameters;
@property (nonatomic, copy) RCTBubblingEventBlock onChangeParameters;
@end
@interface RCTConvert (FHTFilterMenu)
@end
@interface FHTFilterMenuManager : RCTViewManager <RCTBridgeModule>
@end
// .m
#import "FHTFilterMenuManager.h"
#import <React/RCTUIManager.h>
#import <objc/runtime.h>
#import "FilterMenuRentTypeController.h"
#import "FilterMenuGeographicController.h"
#import "FilterMenuOrderByController.h"
#import "FilterMenuMoreController.h"
#import "FilterMenuRentalController.h"
static ConstString kFilterParams = @"filterParams";
typedef NS_ENUM(NSInteger, FilterMenuType) {
FilterMenuTypeNone,
FilterMenuTypeEntireRent, //整租
FilterMenuTypeSharedRent, //合租
FilterMenuTypeApartment, //独栋公寓
FilterMenuTypeBelowThousand, //千元房源
FilterMenuTypePayMonthly, //月付
FilterMenuTypeVR, //VR
};
@implementation RCTConvert (FHTFilterMenu)
RCT_ENUM_CONVERTER(FilterMenuType,
(@{@"None": @(FilterMenuTypeNone),
@"EntireRent": @(FilterMenuTypeEntireRent),
@"SharedRent": @(FilterMenuTypeSharedRent),
@"Apartment": @(FilterMenuTypeApartment),
@"BelowThousand": @(FilterMenuTypeBelowThousand),
@"PayMonthly": @(FilterMenuTypePayMonthly),
@"VR":@(FilterMenuTypeVR)}),
FilterMenuTypeNone,
integerValue);
@end
@implementation FHTFilterMenu (RNBridge)
#pragma mark - Setter & Getter
- (void)setOnUpdateParameters:(RCTBubblingEventBlock)onUpdateParameters {
objc_setAssociatedObject(self,
@selector(onUpdateParameters),
onUpdateParameters,
OBJC_ASSOCIATION_COPY_NONATOMIC);
}
- (RCTBubblingEventBlock)onUpdateParameters {
return objc_getAssociatedObject(self, @selector(onUpdateParameters));
}
- (void)setOnChangeParameters:(RCTBubblingEventBlock)onChangeParameters {
objc_setAssociatedObject(self,
@selector(onChangeParameters),
onChangeParameters,
OBJC_ASSOCIATION_COPY_NONATOMIC);
}
- (RCTBubblingEventBlock)onChangeParameters {
return objc_getAssociatedObject(self, @selector(onChangeParameters));
}
- (void)setFilterMenuType:(FilterMenuType)filterMenuType {
switch (filterMenuType) {
case FilterMenuTypeEntireRent: {
UIViewController *vc = (UIViewController *)self.filterControllers[0];
[vc presetWithOptionTitles:@[@"整租"]];
}
break;
case FilterMenuTypeSharedRent: {
UIViewController *vc = (UIViewController *)self.filterControllers[0];
[vc presetWithOptionTitles:@[@"合租"]];
}
break;
case FilterMenuTypeApartment: {
UIViewController *vc = (UIViewController *)self.filterControllers[3];
[vc presetWithOptionTitles:@[@"房源类型/独栋公寓"]];
}
break;
case FilterMenuTypeBelowThousand: {
UIViewController *vc = (UIViewController *)self.filterControllers[2];
[vc presetWithOptionTitles:@[@"1500以下"]];
}
break;
case FilterMenuTypePayMonthly: {
UIViewController *vc = (UIViewController *)self.filterControllers[3];
[vc presetWithOptionTitles:@[@"房源亮点/月付"]];
}
break;
case FilterMenuTypeVR: {
UIViewController *vc = (UIViewController *)self.filterControllers[3];
[vc presetWithOptionTitles:@[@"房源亮点/VR"]];
}
break;
default:
break;
}
};
@end
@implementation FHTFilterMenuManager
RCT_EXPORT_MODULE();
RCT_EXPORT_VIEW_PROPERTY(onUpdateParameters, RCTBubblingEventBlock);
RCT_EXPORT_VIEW_PROPERTY(onChangeParameters, RCTBubblingEventBlock);
RCT_EXPORT_VIEW_PROPERTY(filterMenuType, FilterMenuType);
RCT_CUSTOM_VIEW_PROPERTY(cityId, NSString, FHTFilterMenu) {
FilterMenuGeographicController *vc = view.filterControllers[1];
vc.cityId = (NSString *)json;
};
RCT_CUSTOM_VIEW_PROPERTY(subwayData, NSArray, FHTFilterMenu) {
FilterMenuGeographicController *vc = view.filterControllers[1];
vc.originalSubwayData = (NSArray *)json;
};
RCT_EXPORT_METHOD(showFilterMenuOnView:(nonnull NSNumber *)containerTag filterMenuTag:(nonnull NSNumber *)filterMenuTag) {
RCTUIManager *uiManager = self.bridge.uiManager;
dispatch_async(uiManager.methodQueue, ^{
[uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
UIView *view = viewRegistry[containerTag];
FHTFilterMenu *filterMenu = (FHTFilterMenu *)viewRegistry[filterMenuTag];
[filterMenu showFilterMenuOnView:view];
}];
});
}
- (dispatch_queue_t)methodQueue {
return dispatch_get_main_queue();
}
- (UIView *)view {
FilterMenuRentTypeController *rentTypeVC =
[[FilterMenuRentTypeController alloc] initWithStyle:UITableViewStylePlain];
FilterMenuGeographicController *geographicVC = [FilterMenuGeographicController new];
FilterMenuRentalController *rentalVC =
[[FilterMenuRentalController alloc] initWithStyle:UITableViewStylePlain];
FilterMenuMoreController *moreVC = [FilterMenuMoreController new];
FilterMenuOrderByController *orderByVC =
[[FilterMenuOrderByController alloc] initWithStyle:UITableViewStylePlain];
CGRect frame = CGRectMake(0, FULL_NAVIGATION_BAR_HEIGHT, SCREEN_WIDTH, 44);
FHTFilterMenu *filterMenu = [[FHTFilterMenu alloc] initWithFrame:frame];
filterMenu.filterControllers = @[rentTypeVC, geographicVC, rentalVC, moreVC, orderByVC];
[filterMenu dismissSubmenu:NO];
[filterMenu resetFilter];
[rentTypeVC presetWithOptionTitles:@[]];
__weak FHTFilterMenu *weakFilterMenu = filterMenu;
rentTypeVC.didSetFilterHandler = ^(NSDictionary * _Nonnull params) {
BLOCK_EXEC(weakFilterMenu.onUpdateParameters, @{kFilterParams: params});
};
geographicVC.didSetFilterHandler = ^(NSDictionary * _Nonnull params) {
NSMutableDictionary *tmpParams = [@{@"regionId": nn_makeSureString(params[@"regionId"]),
@"zoneIds": nn_makeSureArray(params[@"zoneIds"]),
@"subwayRouteId": nn_makeSureString(params[@"subwayRouteId"]),
@"subwayStationCodes": nn_makeSureArray(params[@"subwayStationCodes"])} mutableCopy];
BLOCK_EXEC(weakFilterMenu.onUpdateParameters, @{kFilterParams: [tmpParams copy]});
};
rentalVC.didSetFilterHandler = ^(NSDictionary * _Nonnull params) {
NSDictionary *tmpParams = @{@"minPrice": nn_makeSureString(params[@"minPrice"]),
@"maxPrice": nn_makeSureString(params[@"maxPrice"])};
BLOCK_EXEC(weakFilterMenu.onUpdateParameters, @{kFilterParams: tmpParams});
};
moreVC.didSetFilterHandler = ^(NSDictionary * _Nonnull params) {
NSArray *typeArray = params[@"typeArray"];
NSString *type = typeArray.count == 1 ? (typeArray.lastObject)[@"type"] : @"";
NSDictionary *tmpParams = @{@"roomAttributeTags": params[@"highlightArray"],
@"chamberCounts": params[@"chamberArray"],
@"type": type};
BLOCK_EXEC(weakFilterMenu.onUpdateParameters, @{kFilterParams: tmpParams});
};
orderByVC.didSetFilterHandler = ^(NSDictionary * _Nonnull params) {
BLOCK_EXEC(weakFilterMenu.onUpdateParameters, @{kFilterParams: params});
};
filterMenu.filterDidChangedHandler = ^(FHTFilterMenu * _Nonnull filterMenu, id<FHTFilterController> _Nonnull filterController) {
BLOCK_EXEC(weakFilterMenu.onChangeParameters, nil);
};
return filterMenu;
}
@end
复制代码- JS達成
import React, { Component } from 'react';
import { requireNativeComponent, NativeModules, findNodeHandle } from 'react-native';
const FilterMenu = requireNativeComponent('FHTFilterMenu', SearchFilterMenu);
const filterMenuManager = NativeModules.FHTFilterMenuManager;
export const FilterMenuType = {
NONE: 'None',
ENTIRERENT: 'EntireRent',
SHAREDRENT: 'SharedRent',
APARTMENT: 'Apartment',
BELOWTHOUSAND: 'BelowThousand',
PAYMONTHLY: 'PayMonthly',
VR: 'VR'
}
export default class SearchFilterMenu extends Component {
componentDidUpdate() {
const filterMenuTag = findNodeHandle(this.refs.filterMenu);
const containerTag = findNodeHandle(this.props.containerRef);
if (filterMenuTag && containerTag) filterMenuManager.showFilterMenuOnView(containerTag, filterMenuTag);
}
render() {
return <FilterMenu ref='filterMenu' {...this.props} />;
}
}
复制代码- JSコール
<SearchFilterMenu
style={styles.filterMenu}
cityId={`${home.cityId}`}
subwayData={home.subwayData}
containerRef={this.refs.container}
filterMenuType={this.params.filterMenuType}
onChangeParameters={() => this._loadData(true)}
onUpdateParameters={({ nativeEvent: { filterParams } }) => {
this.filterParams = {
...this.filterParams,
...filterParams,
};
}}
/>
复制代码ViewManagerを作成します
FHTFilterMenuManager継承されたRCTViewManagerネイティブUIの各する必要がありますRCTViewManager作成および管理するためのサブクラス。プログラムが実行されている、RCTViewManagerネイティブUIを作成し、ビューに提供するためにRCTUIManager、RCTUIManager今度は、委託RCTViewManager設定し、ビューを更新するために必要なときに、プロパティを。ノートのポイントがあります：ViewManager命名形式は、ネイティブコンポーネントマネージャー名+です。
最も重要なViewManagerを実装する必要がありますされ- (UIView *)viewますが、ブリッジするネイティブUIを返すために使用され、。
ネイティブコンポーネントから本来のトランスファ特性を反応
私たちは、RNコンポーネントがプロパティを受信した場合、彼らは渡すことができ、プロパティは最もシンプルなクロスコンポーネント通信であることを知っているRCT_EXPORT_VIEW_PROPERTYとRCT_CUSTOM_VIEW_PROPERTY道のネイティブコンポーネントに渡されます。
RCT_EXPORT_VIEW_PROPERTYJSは、元の緑色成分搬送特性に露出されてもよいです。だからFHTFilterMenuManager、私はそれぞれ、JSにさらされる3つのプロパティを所有し、
// 点击确定按钮执行网络请求的block
RCT_EXPORT_VIEW_PROPERTY(onUpdateParameters, RCTBubblingEventBlock);
// 点击子菜单item，参数变更的block
RCT_EXPORT_VIEW_PROPERTY(onChangeParameters, RCTBubblingEventBlock);
// 筛选菜单的类型，
RCT_EXPORT_VIEW_PROPERTY(filterMenuType, FilterMenuType);
复制代码ここでは、プロジェクトで、私はあまりにも多くのネイティブコンポーネントRNブリッジ関連のコードを持ってしたくないので、私は、ネイティブコンポーネントのプロパティの分類を拡大する方法を使用し、その分類の使用が拡大し、そのコードも切り離すことができます。
ポイントの注意があります：あなたはプロパティはブロックタイプで所有している場合、プロパティ名はONで起動する必要があります。
RCT_CUSTOM_VIEW_PROPERTYそれは、私たちはいくつかのより複雑なプロパティを追加することができます。ためcityIdとsubwayDataされFilterMenuGeographicController、それらに設定されている場合にのみ必要このサブメニューFHTFilterMenuプロパティが適切ではありませんが、FilterMenuGeographicController我々はJSにさらされていないので、我々が使用できるRCT_CUSTOM_VIEW_PROPERTYオブジェクトJSプロパティの転送にさらされないように。
RCT_CUSTOM_VIEW_PROPERTY(cityId, NSString, FHTFilterMenu) {
FilterMenuGeographicController *vc = view.filterControllers[1];
vc.cityId = (NSString *)json;
};
RCT_CUSTOM_VIEW_PROPERTY(subwayData, NSArray, FHTFilterMenu) {
FilterMenuGeographicController *vc = view.filterControllers[1];
vc.originalSubwayData = (NSArray *)json;
};
复制代码ネイティブネイティブコンポーネントメソッド呼び出しを反応させます
RCT_EXPORT_METHODJSへのネイティブメソッドの呼び出しを提供します。RCT_EXPORT_METHOD(showFilterMenuOnView:(nonnull NSNumber *)containerTag filterMenuTag:(nonnull NSNumber *)filterMenuTag)サブメニューに追加実装するために使用されるSearchHousePage以下のことを実現します、：
RCT_EXPORT_METHOD(showFilterMenuOnView:(nonnull NSNumber *)containerTag filterMenuTag:(nonnull NSNumber *)filterMenuTag) {
RCTUIManager *uiManager = self.bridge.uiManager;
dispatch_async(uiManager.methodQueue, ^{
[uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *,UIView *> *viewRegistry) {
UIView *view = viewRegistry[containerTag];
FHTFilterMenu *filterMenu = (FHTFilterMenu *)viewRegistry[filterMenuTag];
[filterMenu showFilterMenuOnView:view];
}];
});
}
复制代码前記containerTagコードを表すために使用されるSearchHousePage、filterMenuTagフィルタ基準を述べています。ポイントがあることに注意してください：あなたは、それが新しいFHTFilterMenuオブジェクトが作成されますので、self.viewの方法を使用することはできませんが、することはできません- (UIView *)view参照用に使用してコンポーネントを使用して複数のページで使用され、その後場合は、ビューのうちの創出を指し、 、それは間違って行くでしょう。
メインスレッドを置くためのiOS UI操作が行われているので、好ましいmethodQueueメインスレッドを指定します。
エンディング
ここでは全体のSearchHousePageあなたは、完全なコードワードを確認する必要がある場合はページの開発は、完成されたコードのポータル--NNHybridに。