一：介绍
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
在React Native移动平台项目开发中，除了React Native 提供的封装好的部分插件和原声组建外，在实际的项目中还需要使用到很多其他的插件，比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能，都为IDE开发平台提供封装好的插件，以便项目开发使用。
另外，这些博文都是来源于我日常开发中的技术总结，在时间允许的情况下，我会针对技术点分别分享iOS、Android两个版本，如果有其他技术点需要，可在文章后留言，我会尽全力帮助大家。这篇文章重点介绍原生浏览器插件的开发与使用
源码Demo获取方法
如果需要React Native浏览器插件源码demo，欢迎关注 【网罗开发】微信公众号，回复【61】便可领取。
网罗天下方法，方便你我开发，所有文档会持续更新，欢迎关注一起成长！
二：实现思路分析
原生浏览器插件是需要实现打开默认浏览器和打开自定义浏览器，具体的实现思路如下：
- 新建WebviewManager类，实现自定义浏览器
- 新建Webview类，实现RCTBridgeModule协议
- 添加RCT_EXPORT_MODULE()宏
- 添加React Native跟控制器
- 声明被JavaScript 调用的方法
- URL规范检测
- 根据传参打开浏览器
- Javascript调用浏览器方法
三：实现源码分析
1. 新建WebviewManager类，实现自定义浏览器
新建继承UIViewController的WebviewManager类，并在.h声明webURL变量
//WebviewManager.h
#import <UIKit/UIKit.h>
@interface WebviewManager : UIViewController
@property(nonatomic,strong)NSString *webURL;
@end通过webURL调用NSURLRequest 封装的requestWithURL方法打开浏览器，并在视图中显示，代码如下：
//WebviewManager.m
#import "WebviewManager.h"
#import<WebKit/WebKit.h>
@interface WebviewManager ()
@property(nonatomic,strong)WKWebView *webView;
@end
@implementation WebviewManager
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(20, 30, 40, 24);
[btn setTitle:@"返回" forState:UIControlStateNormal];
[btn addTarget:self action:@selector(backAction)
forControlEvents:UIControlEventTouchUpInside];
btn.titleLabel.font = [UIFont systemFontOfSize:15];
[btn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[self.view addSubview:btn];
self.webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 64, [[UIScreen mainScreen]bounds].size.width, [[UIScreen mainScreen]bounds].size.height-64)];
[self.view addSubview:self.webView];
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:self.webURL]]];
}
- (void)backAction{
[self dismissViewControllerAnimated:YES completion:nil];
}
@end2. 新建Webview类，实现RCTBridgeModule协议
新建继承NSObject的Webview类，并实现RCTBridgeModule协议
// Webview.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface Webview : NSObject<RCTBridgeModule>
@end3. 添加RCT_EXPORT_MODULE()宏
为了实现RCTBridgeModule协议，Webview的类需要包含RCT_EXPORT_MODULE()宏。
并在这个宏里面添加一个参数“WebviewPlugin”用来指定在 JavaScript 中访问这个模块的名字。
如果你不指定，默认就会使用这个 Objective-C 类的名字。
如果类名以 RCT 开头，则 JavaScript 端引入的模块名会自动移除这个前缀。
// Webview.m
#import "Webview.h"
@implementation Webview
RCT_EXPORT_MODULE(WebviewPlugin);
@end4. 添加React Native跟控制器
如果不添加React Native跟控制器，view将不能正常显示出来，实现方法如下：
// Webview.m
#import "Webview.h"
#import <React/RCTUtils.h>
@implementation Webview
RCT_EXPORT_MODULE(WebviewPlugin);
@end引入<React/RCTUtils.h>之后，在视图初始化或者显示的时候，按照如下方法调用即可
UIViewController *vc = RCTPresentedViewController();5. 声明被JavaScript 调用的方法
React Native需要明确的声明要给 JavaScript 导出的方法，否则 React Native 不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现：
// Webview.m
#import "Webview.h"
#import <React/RCTUtils.h>
@implementation Webview
RCT_EXPORT_MODULE(WebviewPlugin);
RCT_EXPORT_METHOD(open:(NSDictionary *)arguments
withCompletionHandler:(RCTResponseSenderBlock)completion
failureHandler:(RCTResponseSenderBlock)failure)
{
NSLog(@"调起打开浏览器方法");
}
@end6. URL规范检测
arguments字典是JavaScript调用方法传参用的，arguments字典里面的具体字段可以和JavaScript约定好，打开浏览器的url就是通过arguments字典传过来的，传过来的url字段还不能直接使用，需要检测是否符合url规范，否则是不能正常打开网页的。
URL规范检测代码如下：
- (NSString *)smartURLForString:(NSString *)str
{
NSString * result;
NSString * trimmedStr;
NSRange schemeMarkerRange;
NSString * scheme;
assert(str != nil);
result = nil;
trimmedStr = [str stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
if ( (trimmedStr != nil) && (trimmedStr.length != 0) ) {
schemeMarkerRange = [trimmedStr rangeOfString:@"://"];
if (schemeMarkerRange.location == NSNotFound) {
result = [NSString stringWithFormat:@"http://%@", trimmedStr];
} else {
scheme = [trimmedStr substringWithRange:NSMakeRange(0, schemeMarkerRange.location)];
assert(scheme != nil);
if ( ([scheme compare:@"http" options:NSCaseInsensitiveSearch] == NSOrderedSame)
|| ([scheme compare:@"https" options:NSCaseInsensitiveSearch] == NSOrderedSame) ) {
result = trimmedStr;
} else {
// It looks like this is some unsupported URL scheme.
}
}
}
return result;
}7. 根据传参打开浏览器
此浏览器插件支持打开自定义浏览器和打开默认浏览器，具体使用哪种方法打开浏览器，需要JavaScript通过arguments字典以字段的形式传过来，这里就使用openType字段。
// Webview.m
#import "Webview.h"
#import <React/RCTUtils.h>
@implementation Webview
RCT_EXPORT_MODULE(WebviewPlugin);
RCT_EXPORT_METHOD(open:(NSDictionary *)arguments
withCompletionHandler:(RCTResponseSenderBlock)completion
failureHandler:(RCTResponseSenderBlock)failure)
{
if ([arguments.allKeys containsObject:@"url"]) {
NSString *url = [NSString stringWithFormat:@"%@",arguments[@"url"]];
NSString *openURL = [self smartURLForString:url];
NSString *openType = arguments[@"openType"];
if (!ValidStr(url)&&!ValidStr(openType)) {
NSLog(@"参数错误");
failure(@[@{@"resultCode":@"0",@"resultMessage":@"参数错误"}]);
}else{
if ([openType isEqualToString:[NSString stringWithFormat:@"0"]]) {
dispatch_async(dispatch_get_main_queue(), ^{
WebviewManager *manager = [[WebviewManager alloc]init];
manager.webURL = openURL;
UIViewController *vc = RCTPresentedViewController();
[vc presentViewController:manager animated:YES completion:nil];
completion(@[@{@"status":@"1",@"data":@"成功"}]);
});
}else{
dispatch_async(dispatch_get_main_queue(), ^{
NSURL *urlStr = [NSURL URLWithString:openURL];
[[UIApplication sharedApplication] openURL:urlStr];
completion(@[@{@"status":@"1",@"data":@"成功"}]);
});
}
}
}else{
failure(@[@{@"resultCode":@"0",@"resultMessage":@"参数错误"}]);
}
}8. Javascript调用浏览器方法
现在从 Javascript 里可以这样调用这个方法：
import { NativeModules } from "react-native";
const WebviewPlugin = NativeModules.WebviewPlugin;
WebviewPlugin.open({url:"http://www.baidu.com",openType:"1"},(msg) => {
Alert.alert(JSON.stringify(msg));
},(err) => {
Alert.alert(JSON.stringify(err));
});希望可以帮助大家，如有问题可加QQ技术交流群: 668562416如果哪里有什么不对或者不足的地方，还望读者多多提意见或建议
如需转载请联系我，经过授权方可转载，谢谢
本篇已同步到个人博客：FBY展菲
