iOS--React Native浏览器插件（内附Demo）

2021-01-29 17:34:50 浏览数 (1)

一：介绍

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

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

另外，这些博文都是来源于我日常开发中的技术总结，在时间允许的情况下，我会针对技术点分别分享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变量

代码语言：javascript复制
//WebviewManager.h
#import <UIKit/UIKit.h>
@interface WebviewManager : UIViewController
@property(nonatomic,strong)NSString *webURL;
@end

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

代码语言：javascript复制
//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];
}
@end

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

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

代码语言：javascript复制
// Webview.h
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
#import <UIKit/UIKit.h>
@interface Webview : NSObject<RCTBridgeModule>
@end

3. 添加RCT_EXPORT_MODULE()宏

为了实现RCTBridgeModule协议，Webview的类需要包含RCT_EXPORT_MODULE()宏。

并在这个宏里面添加一个参数“WebviewPlugin”用来指定在 JavaScript 中访问这个模块的名字。

如果你不指定，默认就会使用这个 Objective-C 类的名字。

如果类名以 RCT 开头，则 JavaScript 端引入的模块名会自动移除这个前缀。

代码语言：javascript复制
// Webview.m
#import "Webview.h"
@implementation Webview
RCT_EXPORT_MODULE(WebviewPlugin);
@end

4. 添加React Native跟控制器

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

代码语言：javascript复制
// Webview.m
#import "Webview.h"
#import <React/RCTUtils.h>
@implementation Webview
RCT_EXPORT_MODULE(WebviewPlugin);
@end

引入<React/RCTUtils.h>之后，在视图初始化或者显示的时候，按照如下方法调用即可

代码语言：javascript复制
UIViewController *vc = RCTPresentedViewController();

5. 声明被JavaScript 调用的方法

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

代码语言：javascript复制
// 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(@"调起打开浏览器方法");
}
@end

6. URL规范检测

arguments字典是JavaScript调用方法传参用的，arguments字典里面的具体字段可以和JavaScript约定好，打开浏览器的url就是通过arguments字典传过来的，传过来的url字段还不能直接使用，需要检测是否符合url规范，否则是不能正常打开网页的。URL规范检测代码如下：

代码语言：javascript复制
- (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字段。

代码语言：javascript复制
// 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 里可以这样调用这个方法：

代码语言：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));
                                         });

四：源码Demo获取方法

react 网站 webview javascript php

0 人点赞