iOS--React Native瀏覽器插件

時間  2019-12-06
標籤 ios react native 瀏覽器 插件 欄目 iOS 简体版
原文   原文鏈接

一：介紹

React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架，是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產物，目前支持iOS和安卓兩大平臺。RN使用Javascript語言，相似於HTML的JSX，以及CSS來開發移動應用，所以熟悉Web前端開發的技術人員只需不多的學習就能夠進入移動應用開發領域。前端

在React Native移動平臺項目開發中，除了React Native 提供的封裝好的部分插件和原聲組建外，在實際的項目中還須要使用到不少其餘的插件，好比網絡請求、數據庫、相機、相冊、通信錄、視頻播放器、瀏覽器、藍牙鏈接、圖片處理、消息推送、地圖、統計、埋點等等APP開發中須要用到的功能，都爲IDE開發平臺提供封裝好的插件，以便項目開發使用。react

另外，這些博文都是來源於我平常開發中的技術總結，在時間容許的狀況下，我會針對技術點分別分享iOS、Android兩個版本，若是有其餘技術點須要，可在文章後留言，我會盡全力幫助你們。這篇文章重點介紹原生瀏覽器插件的開發與使用git

源碼Demo獲取方法

若是須要React Native瀏覽器插件源碼demo，歡迎關注 【網羅開發】微信公衆號，回覆【61】即可領取。github

網羅天下方法，方便你我開發，全部文檔會持續更新，歡迎關注一塊兒成長！web

二：實現思路分析

原生瀏覽器插件是須要實現打開默認瀏覽器和打開自定義瀏覽器，具體的實現思路以下：數據庫

  1. 新建WebviewManager類，實現自定義瀏覽器react-native

  2. 新建Webview類，實現RCTBridgeModule協議瀏覽器

  3. 添加RCT_EXPORT_MODULE()宏bash

  4. 添加React Native跟控制器微信

  5. 聲明被JavaScript 調用的方法

  6. URL規範檢測

  7. 根據傳參打開瀏覽器

  8. 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];
}
@end
複製代碼
2. 新建Webview類，實現RCTBridgeModule協議

新建繼承NSObject的Webview類，並實現RCTBridgeModule協議

// 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 端引入的模塊名會自動移除這個前綴。

// 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/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(@"調起打開瀏覽器方法");
}
@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/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展菲

歡迎關注個人公衆號：網羅開發

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程