博客> React Native 原生浏览器插件
React Native 原生浏览器插件
2018-12-13 00:19 评论:0 阅读:53 FBY展菲
ios 视频播放器

一:介绍

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物,目前支持iOS和安卓两大平台。RN使用Javascript语言,类似于HTML的JSX,以及CSS来开发移动应用,因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。

在React Native移动平台项目开发中,除了React Native 提供的封装好的部分插件和原声组建外,在实际的项目中还需要使用到很多其他的插件,比如网络请求、数据库、相机、相册、通讯录、视频播放器、浏览器、蓝牙连接、图片处理、消息推送、地图、统计、埋点等等APP开发中需要用到的功能,都为IDE开发平台提供封装好的插件,以便项目开发使用。

另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享iOS、Android两个版本,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。这篇文章重点介绍原生浏览器插件的开发与使用

二:实现思路分析

原生浏览器插件是需要实现打开默认浏览器和打开自定义浏览器,具体的实现思路如下:

  1. 新建WebviewManager类,实现自定义浏览器

  2. 新建Webview类,实现RCTBridgeModule协议

  3. 添加RCT_EXPORT_MODULE()宏

  4. 添加React Native跟控制器

  5. 声明被JavaScript 调用的方法

  6. URL规范检测

  7. 根据传参打开浏览器

  8. Javascript调用浏览器方法

三:实现源码分析

1. 新建WebviewManager类,实现自定义浏览器

新建继承UIViewController的WebviewManager类,并在.h声明webURL变量

//WebviewManager.h
#import <UIKit>
@interface WebviewManager : UIViewController
@property(nonatomic,strong)NSString *webURL;
@end

通过webURL调用NSURLRequest 封装的requestWithURL方法打开浏览器,并在视图中显示,代码如下:

//WebviewManager.m
#import "WebviewManager.h"
#import<WebKit>
@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];
}
@end
2. 新建Webview类,实现RCTBridgeModule协议

新建继承NSObject的Webview类,并实现RCTBridgeModule协议

// Webview.h
#import <Foundation>
#import <React>
#import <UIKit>
@interface Webview : NSObject<RCTBridgeModule>
@end
3. 添加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);
@end
4. 添加React Native跟控制器

如果不添加React Native跟控制器,view将不能正常显示出来,实现方法如下:

// Webview.m
#import "Webview.h"
#import <React>
@implementation Webview
RCT_EXPORT_MODULE(WebviewPlugin);
@end

引入之后,在视图初始化或者显示的时候,按照如下方法调用即可

UIViewController *vc = RCTPresentedViewController();
5. 声明被JavaScript 调用的方法

React Native需要明确的声明要给 JavaScript 导出的方法,否则 React Native 不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现:

// Webview.m
#import "Webview.h"
#import <React>
@implementation Webview
RCT_EXPORT_MODULE(WebviewPlugin);
RCT_EXPORT_METHOD(open:(NSDictionary *)arguments
                  withCompletionHandler:(RCTResponseSenderBlock)completion
                  failureHandler:(RCTResponseSenderBlock)failure)
{
    NSLog(@"调起打开浏览器方法");
}
@end
6. 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>
@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)) {
            CIBNSLog(@"参数错误");
            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&#40;JSON.stringify(msg&#41;);
                                         },(err) => {
                                         Alert.alert&#40;JSON.stringify(err&#41;);
                                         });

希望可以帮助大家 如果哪里有什么不对或者不足的地方,还望读者多多提意见或建议 iOS技术交流群:668562416

收藏
0
sina weixin mail 回到顶部