React Native知识8-WebView组件
创建一个原生的WebView，可以用于访问一个网页。可以加载一个URL也可以加载一段html代码；
一：属性
1：iosallowsInlineMediaPlayback bool
指定HTML5视频是在网页当前位置播放还是使用原生的全屏播放器播放。 默认值为false。
注意 : 要让视频在网页中播放，不光要将这个属性设为true，HTML中的视频元素本身也需要包含webkit-playsinline属性。
2：automaticallyAdjustContentInsets bool
3：（ios）bounces bool
contentInset {top: number, left: number, bottom: number, right: number}
4：（ios）decelerationRate ScrollView.propTypes.decelerationRate
指定一个浮点数，用于设置在用户停止触摸之后，此视图应以多快的速度停止滚动。也可以指定预设的字符串值，如"normal"和"fast"，分别对应UIScrollViewDecelerationRateNormal 和UIScrollViewDecelerationRateFast。
Normal（正常速度）: 0.998
Fast（较快速度）: 0.9 (iOS WebView的默认值)
5：（android）domStorageEnabled bool
仅限Android平台。指定是否开启DOM本地存储。
6：html string 已过期
请使用source 属性代替。
7：injectedJavaScript string
设置在网页加载之前注入的一段JS代码。
8：mediaPlaybackRequiresUserAction bool
设置页面中的HTML5音视频是否需要在用户点击后再开始播放。默认值为false.
9：onError function
加载失败时调用。
10：onLoad function
加载成功时调用。
11：onLoadEnd function
加载结束时（无论成功或失败）调用。
12：onLoadStart function
加载开始时调用。
13：（android）javaScriptEnabled bool
仅限Android平台。iOS平台JavaScript是默认开启的。
14：onNavigationStateChange function
15：（ios）onShouldStartLoadWithRequest function
允许为webview发起的请求运行一个自定义的处理函数。返回true或false表示是否要继续执行响应的请求。
16：renderError function
设置一个函数，返回一个视图用于显示错误。
17：renderLoading function
设置一个函数，返回一个加载指示器。
18：source {uri: string, method: string, headers: object, body: string}, {html: string, baseUrl: string}, number
在WebView中载入一段静态的html代码或是一个url（还可以附带一些header选项）。
19：scalesPageToFit bool
设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。
20：（ios）scrollEnabled bool
21：startInLoadingState bool
22：style View#style
23：url string
已过期
请使用source 属性代替。
24：（android）userAgent string #
为WebView设置user-agent字符串标识。这一字符串也可以在原生端用WebViewConfig来设置,但js端的设置会覆盖原生端的设置。
二：实例代码：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Alert,
TouchableHighlight,
TouchableOpacity,
WebView
} from 'react-native';
const HTML = `
<!DOCTYPE html>\n
<html>
<head>
<title>Hello Static World</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=320, user-scalable=no">
<style type="text/css">
body {
margin: 0;
padding: 0;
font: 62.5% arial, sans-serif;
background: #ccc;
}
h1 {
padding: 45px;
margin: 0;
text-align: center;
color: #33f;
}
</style>
</head>
<body>
<h1>Hello Static World</h1>
</body>
</html>
`;
const url='http://www.cocoachina.com/';
//导航栏
class ReactNativeProject extends Component {
render() {
return (
<WebView style={styles.container} source={{uri: url}} onLoad={()=>alert('加载成功')}/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:64
},
item:
{
fontSize:18,
marginLeft:5,
color:'#434343'
}
});
AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
效果图：
三：知识点：
1：其它加载方式：
<WebView
style={{
backgroundColor: BGWASH,
height: 100,
}}
source={{
uri: 'http://www.posttestserver.com/post.php',
method: 'POST',
body: 'foo=bar&bar=foo'
}}
scalesPageToFit={false}
/>
<WebView
style={{
backgroundColor: BGWASH,
height: 100,
}}
source={require('./helloworld.html')}
scalesPageToFit={true}
/>
<WebView
style={{
backgroundColor: BGWASH,
height: 100,
}}
source={{html: HTML}}
scalesPageToFit={true}
/> 其中HTML是html文本常量；是一段html代码
最近有个妹子弄的一个关于扩大眼界跟内含的订阅号，每天都会更新一些深度内容，在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣)，当然可以关注后输入：github 会有我的微信号，如果有问题你也可以在那找到我；当然不感兴趣无视此信息；
React Native知识8-WebView组件的更多相关文章
- React Native知识5-Touchable类组件
React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...
- React Native知识
http://www.cnblogs.com/wujy/tag/React%20Native/ React Native知识12-与原生交互 React Native知识11-Props(属性) ...
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- React Native知识6-NavigatorIOS组件
NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...
- React Native知识2-Text组件
Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...
- React Native知识12-与原生交互
一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...
- React Native知识1-FlexBox 布局内容
一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其 ...
- [React Native] Using the WebView component
We can access web pages in our React Native application using the WebView component. We will connect ...
- React Native知识9-ScrollView组件
一个包装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统. 记住ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组 ...
- React Native知识10-ListView组件
ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据 ...
随机推荐
- js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【原创】开源Math.NET基础数学类库使用(06)直接求解线性方程组
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...
- C#多任务并行阶段控制—— Threading.Barrier
有一种场景:4个人同时做某项任务,该任务分为3个阶段,必须要4个人都完成第一阶段后才可以进入第二阶段,都完成第二阶段后才可以进入第三阶段. 此时就需要对多个并行的任务做进度控制. Threading. ...
- jquery EasyUI的formatter格式化函数代码
要格式化数据表格列,需要设置formatter属性,该属性是一个函数,它包含两个参数: value: 对应字段的当前列的值 record: 当前行的记录数据 复制代码 代码如下: $('#tt' ...
- RESTful API URI 设计: 判断资源是否存在？
相关的一篇文章:RESTful API URI 设计的一些总结. 问题场景:判断一个资源(Resources)是否存在,URI 该如何设计? 应用示例:判断 id 为 1 用户下,名称为 window ...
- geotrellis使用（三）geotrellis数据处理过程分析
之前简单介绍了geotrellis的工作过程以及一个简单的demo,最近在此demo的基础上实现了SRTM DEM数据的实时分析以及高程实时处理,下面我就以我实现的上述功能为例,简单介绍一下geotr ...
- android 如何获取手机的图片、视频、音乐
在android 开发中,很多时候,我们会需要调用到用户本机的照片.视频或者是音乐让用户选择,来进行我们APP对应的操作. button.setOnClickListener(new OnClickL ...
- 1Z0-053 争议题目解析690
1Z0-053 争议题目解析690 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 690.The database users regularly complain about t ...
- Apache 创建虚拟主机目录和设置默认访问页面
虚拟主机 (Virtual Host) 是在同一台机器搭建属于不同域名或者基于不同 IP 的多个网站服务的技术. 可以为运行在同一物理机器上的各个网站指配不同的 IP 和端口, 也可让多个网站拥有不同 ...
- 数据结构(c语言第2版)-----了解链表，栈，队列，串
关于链表我觉得这都是最基本的东西,但是不常见,在实际的应用中很少的使用,了解它会用就OK,不需要研究的那么深,除非做那种内存压缩,存储方面工作. C语言中动态申请空间 malloc() q=(dlin ...