一、IOS配置

1574756705247.jpg

2、在RN項(xiàng)目中，自帶的WebView在加載HTML的時(shí)候，不能加載css與js文件，所以本人用OC原生封裝了一個(gè)webView控件，如下,webView要繼承RCTViewManager。

#import <UIKit/UIKit.h>
#import <React/RCTViewManager.h>

NS_ASSUME_NONNULL_BEGIN

@interface WebView : RCTViewManager

@end

NS_ASSUME_NONNULL_END

#import "WebView.h"
#import <WebKit/WebKit.h>
//iOS調(diào)用RN
#import <React/RCTEventDispatcher.h>

@interface WebView ()

@property (nonatomic ,strong)WKWebView *webView ;

@end

@implementation WebView

RCT_EXPORT_MODULE();

- (UIView *)view
{
  WKWebView *view = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
  self.webView = view;
  return view;
}

RCT_CUSTOM_VIEW_PROPERTY(url, NSString,WKWebView){
  NSLog(@"url = %@",json);
  NSString *filePath = [[NSBundle mainBundle] pathForResource:json ofType:@"html" inDirectory:@"HTML/js/GJ_Popups"];
  NSURL *pathURL = [NSURL fileURLWithPath:filePath];
  [self.webView loadRequest:[NSURLRequest requestWithURL:pathURL]];
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

@end

注：獲取本地HTML文件的時(shí)候，inDirectory后面要加上文件的絕對(duì)路徑，不然會(huì)獲取不到，切記。。。

RCT_CUSTOM_VIEW_PROPERTY（）為自定義屬性，此處要重點(diǎn)說(shuō)明的是RCT_CUSTOM_VIEW_PROPERTY(name, type, viewClass)這個(gè)方法，點(diǎn)進(jìn)去之后，顯示的是
/**

• This macro can be used when you need to provide custom logic for setting
• view properties. The macro should be followed by a method body, which can
• refer to "json", "view" and "defaultView" to implement the required logic.
  */

define RCT_CUSTOM_VIEW_PROPERTY(name, type, viewClass)

RCT_REMAP_VIEW_PROPERTY(name, custom, type)
-(void)set_##name:(id)json forView:(viewClass *)view withDefaultView:(viewClass *)defaultView
我們傳入的是 數(shù)據(jù)，數(shù)據(jù)類型，viewClass，但是調(diào)用的時(shí)候，數(shù)據(jù)對(duì)應(yīng)的參數(shù)名稱是：json, 至于view則指的是當(dāng)前創(chuàng)建的這個(gè)view,也就是 -（UIView *）view 中所返回的這個(gè)view,至于最后的defaultView,官方給出的定義：最后，還有一個(gè)defaultView對(duì)象，這樣當(dāng)JS給我們發(fā)送null的時(shí)候，可以把視圖的這個(gè)屬性重置回默認(rèn)值。

rn.jpg

二、Android配置

1.先打開(kāi)android/app/src/main/assets,如果沒(méi)有assets這個(gè)文件夾,那就創(chuàng)建一個(gè)吧!
2.把你的HTML相關(guān)文件放在assets中
3.代碼如下所示

import React, { Component } from 'react';
import { StyleSheet, View, Dimensions, WebView } from 'react-native';

export default class h5rn extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {

    return (
      <View style={{ flex: 1 }}>
        <WebView style={styles.webview_style}
            source={{ uri: "file:///android_asset/你的文件名/test.html" }}
            originWhitelist={['*']}
            startInLoadingState={true}
            domStorageEnabled={true}
            javaScriptEnabled={true}
          >
          </WebView>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  webview_style: {
    backgroundColor: '#00ff00',
  }
});

4.修改代碼source={{ uri:'file:///android_asset/web/'}}重點(diǎn):file:///android_asset/自定義的文件名/ 就是我們需要的靜態(tài)資源地址.