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数据源,然后给它传递一个普通的数据数组,再使用数据 ...
随机推荐
- Android随笔之——静默安装、卸载
随笔之所以叫随笔,就是太随意了,说起来,之前的闹钟系列随笔还没写完,争取在十月结束之前找时间把它给写了吧.今天要讲的Android APK的静默安装.卸载.网上关于静默卸载的教程有很多,更有说要调用隐 ...
- css3实现的动画效果
在线演示:莲花盛开 在线演示:忙碌光标效果 在线演示:发光效果
- 编写.gitignore文件的几个小技巧
记录几个编写.gitignore文件的小技巧,可能你早就知道了,但我是google了一番才找到写法. 忽略所有名称为bin的文件夹 bin/ 只忽略第一级目录中,名称为bin的文件夹 /bin/ 忽略 ...
- 去百度API的百度地图准确叠加和坐标转换的解决方案研究
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百 ...
- 解决ArcGIS中因SDE或数据库配置问题而导致服务宕掉的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 最近连续有两个项目现场出现了AGS服务荡掉的问题,一个是通州 ...
- C#运用ThoughtWorks生成二维码
在现在的项目中,较多的使用到二维码,前面介绍过一篇使用Gma生成二维码的操作,现在介绍一个第三方组件,主要介绍生成二维码,二维码的解析,以及对二维码的相关信息的选择,现在介绍ThoughtWorks用 ...
- ThinkPHP中的快捷函数小结
U() 制作url地址的快捷函数 C(名称) 获得配置变量(convertion.php config.php)信息C(名称,值) 设置配置变量信息 L() 获得语言变量信息E() 给页面输出错误信息 ...
- 获取当前方法名，行号，类名，所在java文件第几行
public class Demo { public static void main(String[] args) { Demo demo = new Demo(); demo.go(); } pu ...
- Web App 向上滑动动态加载数据 2015-06-11 09:36 20人阅读 评论(0) 收藏
好久没有写博客了 - - ,个人原因 个人原因.. 宣传一下...自己的.NET群:252713569 欢迎各位大神加入 嗯..最近在公司开发微信平台的东西..需要做一个WebAPP(PS:其实就是 ...
- SQL Server基础之《视图的概述和基本操作》
数据库中的视图是一个虚拟表.同真实的表一样,视图包含一系列带有名称的列和行数据,行和列数据用来自由定义视图和查询所引用的表,并且在引用视图时动态产生.本篇将通过一些实例来介绍视图的概念,视图的作用, ...