一、IOS配置
1、先把HTML文件添加到iOS项目中，添加为静态文件，如下图所示
2、在RN项目中，自带的WebView在加载HTML的时候，不能加载css与js文件，所以本人用OC原生封装了一个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调用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文件的时候，inDirectory后面要加上文件的绝对路径，不然会获取不到，切记。。。
在rn中的用法如下图RCT_CUSTOM_VIEW_PROPERTY（）为自定义属性，此处要重点说明的是RCT_CUSTOM_VIEW_PROPERTY(name, type, viewClass)这个方法，点进去之后，显示的是
/**
- 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
我们传入的是 数据，数据类型，viewClass，但是调用的时候，数据对应的参数名称是：json, 至于view则指的是当前创建的这个view,也就是 -（UIView *）view 中所返回的这个view,至于最后的defaultView,官方给出的定义：最后，还有一个defaultView对象，这样当JS给我们发送null的时候，可以把视图的这个属性重置回默认值。
二、Android配置
1.先打开android/app/src/main/assets,如果没有assets这个文件夹,那就创建一个吧!
2.把你的HTML相关文件放在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/'}}重点:file:///android_asset/自定义的文件名/ 就是我们需要的静态资源地址.
