RN 项目访问本地HTML，CSS,JS渲染

一、IOS配置

1、先把HTML文件添加到iOS项目中，添加为静态文件，如下图所示

1574756705247.jpg

2、在RN项目中，自带的WebView在加载HTML的时候，不能加载css与js文件，所以本人用OC原生封装了一个webView控件，如下,webView要继承RCTViewManager。

#import 
#import 

NS_ASSUME_NONNULL_BEGIN

@interface WebView : RCTViewManager

@end

NS_ASSUME_NONNULL_END

#import "WebView.h"
#import 
//iOS调用RN
#import 

@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后面要加上文件的绝对路径，不然会获取不到，切记。。。

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的时候，可以把视图的这个属性重置回默认值。

在rn中的用法如下图

rn.jpg

二、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 (
      
        
          
      
    );
  }
}

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

4.修改代码source={{ uri:'file:///android_asset/web/'}}重点:file:///android_asset/自定义的文件名/ 就是我们需要的静态资源地址.