React-Native WebView组件的使用

WebView组件的属性

1.allowFileAccess:布尔值,设置是否WebView有权访问文件系统。默认值为false(Android);

2.geolocationEnabled:是否允许获取地里位置(android);

3.source:在 WebView 中载入一段静态的 html 代码或是一个 url(还可以附带一些 header 选项)。注意如果是载入html代码,则需要设置originWhitelist,比如可以设为["*"]来允许运行本地代码。

uri:指定组件加载的网址,

method:指定加载的方式,需要服务端配合,

headers:指定加载时的请求头,需要服务端配合,

body:指定加载的请求体,需要服务端配合,

html:用来指定直接加载的html页面格式,

baseUrl:用来将需要加载的文件路径写成相对项目的相对路径

4.originWhitelist:允许导航到的源字符串列表。字符串允许使用通配符,并且只与源(而不是完整的URL)匹配。如果用户点击导航    到一个新页面,但是新页面不在这个白名单中,那么URL将由操作系统处理。默认的白名单来源是“http://”和“https://”。

5.automaticallyAdjustContentInsets:控制插入到导航栏,标签栏或者工具条之后的 web 内容是否自适应。默认为true。

6.mediaPlaybackRequiresUserAction:控制 HTML5 音频和视频播放前是否需要用户点击。默认为true。

7.onError:加载失败调用

8.onLoad加载成功调用

9.onLoadEnd:加载结束调用(不管成功还是失败)

10.onLoadStart:开始加载是调用

11.onNavgationStateChange:导航状态改变时被调用

12.onMessage:在 webview 内部的网页中调用 window.postMessage 方法时可以触发此属性对应的函数,从而实现网页和 RN 之间的数据交换。 设置此属性的同时会在 webview 中注入一个 postMessage 的全局函数并覆盖可能已经存在的同名实现。网页端的 window.postMessage 只发送一个参数 data,此参数封装在 RN 端的 event 对象中,即 event.nativeEvent.data。data 只能是一个字符串。

13.renderError:设置一个函数,返回一个视图用于显示错误。

14.renderLoading:设置一个函数,返回一个加载指示器。。为了使用这个属性必须将 startInLoadingState 属性设置为 true。

15.startInLoadingState:布尔值,控制WebView第一次加载时是否显示加载视图(如指示器)。当设置了renderLoading时必须将这个属性设置为true 才能正常显示。

16.scalesPageToFit:布尔值,控制网页内容是否自动适配视图的大小,同时启用用户缩放功能。默认为true。

On iOS, when useWebKit=true, this prop will not work.

17.style:设置样式,跟View类似。

18.decelerationRate:指定一个浮点数,用于设置在用户停止触摸之后,此视图应以多快的速度停止滚动。也可以指定预设的字符串值,如"normal"和"fast",分别对应 UIScrollViewDecelerationRateNormal 和 UIScrollViewDecelerationRateFast。(ios)

normal: 0.998

fast: 0.99 (ios web view 默认)

19.domStorageEnabled:开启Dom本地存储(android)

20.javaScriptEnabled:控制是否启用 JavaScript。仅在安卓下使用,因为 IOS 默认为启用 JavaScript。默认值为true。(android)

21.mixedContentMode:指定混合内容模式。即 WebView 是否应该允许安全链接(https)页面中加载非安全链接(http)的内容

never (默认) - WebView 不允许安全链接页面中加载非安全链接的内容

always - WebView 允许安全链接页面中加载非安全链接的内容。

compatibility - WebView 会尽量和浏览器当前对待此情况的行为一致

(android only)

22.userAgent:设置 WebView的 user agent 字符串。目前仅支持 Android。

23.allowsInlineMediaPlayback:控制 HTML5 视频是在内部播放(非全屏)还是使用原生的全屏控制器。默认为 false。注意:为了确保内联播放,除了这个属性需要被设置成true, 在 html 代码中视频元素也需要包含 webkit-playsinline属性。(ios)。

24:bounces:控制当 webview 内容到达底部时是否进行回弹。默认为 true。(ios)

25:contentInset:webview 插入到滑动视图时距离边缘的距离。默认为{top: 0, left: 0, bottom: 0, right: 0}。(ios)

26:dataDetectorTypes检测 webview 内容,并将指定类型的数据变成可点击的 URL。默认只对手机号码进行变换。你可以提供单一类型或者数组类型。(ios)

可用的 dataDetectorTypes 如下:

phoneNumber

link

address

calendarEvent

none

all

如果启用新的WKWebView实现,还有额外的三个值可用:

trackingNumber

flightNumber

lookupSuggestion

27:scrollEnabled:控制是否在 WebView中启用滑动。默认为 true。

28:useWebKit:设置true的时候会使用新的WKWebView来代替老的UIWebView。(ios)

WebView组件的方法

1:goForward()

2:goBack()

3:reload()

4:stopLoading()

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,099评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,473评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,229评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,570评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,427评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,335评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,737评论 3 386
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,392评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,693评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,730评论 2 312
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,512评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,349评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,750评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,017评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,290评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,706评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,904评论 2 335

推荐阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,331评论 0 17
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,068评论 1 32
  • 在白苍岭市场买菜,更多地是享受一份温暖。 卖猪肉的大师傅常常从柜台下摸出包东西"我刚留下的,就这点...
    weijg阅读 472评论 5 2
  • 特别注意 安装iis和xmapp之前需要配置内存,阿里云默认的虚拟内存是0配置 Windows 系统虚拟内存 wi...
    牵手生活阅读 1,294评论 0 1
  • 我是一个动画专业同学,因为动画作业比较多,每天晚上都需要熬夜。有时上课又比较枯燥,我就会用手里的笔把我周围的同学或...
    毕之XX阅读 375评论 2 4