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数据源,然后给它传递一个普通的数据数组,再使用数据 ...
随机推荐
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- PHP精选数组函数
编程怎么能少的了数组呢,以下是学习PHP时常用的数组处理函数.在编程中要遵循一个原则就是DRY(Don`t Repeat Yourself)原则,PHP中有大量的函数,都记住这些函数不太现实,但常用的 ...
- UWP开发之Mvvmlight实践三：简单MVVM实例开发(图文详解付代码)
在做MVVM各种框架对比之前,我觉得有必要先自己做一个简单的MVVM实现案例比较好,这样就可以看到自己实现的时候有那些不方便的地方.而各种框架又是怎么解决我们这些麻烦的. 案例介绍:用户登录画面,没有 ...
- Lua 学习笔记（九）协同程序（线程thread）
协同程序与线程thread差不多,也就是一条执行序列,拥有自己独立的栈.局部变量和命令指针,同时又与其他协同程序共享全局变量和其他大部分东西.从概念上讲线程与协同程序的主要区别在于,一个具有多个线程的 ...
- 1Z0-053 争议题目解析577
1Z0-053 争议题目解析577 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 577.What methods are available to recover lost co ...
- Linux NFS 服务部署
系统环境:Oracle Linux 5.7 服务端:192.168.1.111 客户端:192.168.1.171 一.服务端配置 二.客户端配置 一.服务端配置 1.依次启动portmap和nfs服 ...
- MySQL入门03-MySQL配置安全性、易用性
一.设定管理员用户和密码 二.处理test库权限隐患 三.自定义脚本提升易用性 中间定义文件 启动MySQL服务 关闭MySQL服务 快捷登录MySQL 四.设置开机自动启动MySQL服务 Refer ...
- CodeIgniter-Lottery - php ci 抽奖辅助函数
CodeIgniter-Lottery - php ci 抽奖辅助函数 Github https://github.com/xjnotxj/CodeIgniter-Lottery 用法 1. 移入文件 ...
- 分享一下刚刚HP电话面试。。。。。。。。我估计我挂了，不过还是要来分享一下
面试官是个中国人,给我是全英文面试,总之是做HP的外包业务,说得很好的工作环境,里面都是一些老外在工作. 首先是要用英文介绍了下自己,我自己觉得自己也还是不错的吧,然后就说了一通(其实我好久没说英文了 ...
- PHP数组及简单函数
PHP函数: 1.简单函数 四要素:返回类型,函数名,参数列表,函数体 function Show() { echo "hello"; } Show(); 运行结果:hellow ...