iOS--React Native瀏覽器插件

一：介紹

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

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

另外，這些博文都是來源於我日常開發中的技術總結，在時間允許的情況下，我會針對技術點分別分享iOS、Android兩個版本，如果有其他技術點需要，可在文章後留言，我會盡全力幫助大家。這篇文章重點介紹原生瀏覽器插件的開發與使用

二：實現思路分析

原生瀏覽器插件是需要實現打開默認瀏覽器和打開自定義瀏覽器，具體的實現思路如下：

新建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];
}
@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)) {
            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(JSON.stringify(msg));
                                         },(err) => {
                                         Alert.alert(JSON.stringify(err));
                                         });

希望可以幫助大家，如有問題可加QQ技術交流羣: 668562416

如果哪裏有什麼不對或者不足的地方，還望讀者多多提意見或建議

如需轉載請聯繫我，經過授權方可轉載，謝謝

iOS--React Native瀏覽器插件

一：介紹

二：實現思路分析

三：實現源碼分析

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

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

3. 添加RCT_EXPORT_MODULE()宏

4. 添加React Native跟控制器

5. 聲明被JavaScript 調用的方法

6. URL規範檢測

7. 根據傳參打開瀏覽器

8. Javascript調用瀏覽器方法

.Net 8.0 下的新RPC，IceRPC之試試的新玩法"打洞"

關於遊戲付費的一點想法

我通過CKA和CKS啦！

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

LeetCode - #2 Add Two Numbers

LeetCode - #1 Two Sum

探索 SwiftUI 基本手勢

Swift 5 & Alamofire 5 : GET method ERROR:

整理出 45 本電子版書籍

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結