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代码
时间: 2024-10-10 14:15:23

React Native知识8-WebView组件的相关文章

React Native知识5-Touchable类组件

React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件事. 1.TouchableHighlight:高亮触摸,用户点击时,会产生高亮效果. 2.TouchableOpacity:透明触摸.用户点击时,点击的组件会出现透明效果. 3.TouchableWithoutFeedback:无反馈性触摸.用户点击时无任何视觉效果. 注意:只支持一个子节点,如果

React Native知识

http://www.cnblogs.com/wujy/tag/React%20Native/ React Native知识12-与原生交互 React Native知识11-Props(属性)与State(状态) React Native学习笔记之2 React Native知识10-ListView组件 React Native知识9-ScrollView组件 React Native知识8-WebView组件 React Native知识7-TabBarIOS组件 React Native

推荐 11 款 React Native 开源移动 UI 组件

推荐 11 款 React Native 开源移动 UI 组件 oschina 发布于 10个月前,共有 14 条评论 本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理

React Native知识2-Text组件

Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加了它自己额外的样式.标题和文本会在顶部依次堆叠,并且被代码中内嵌的换行符分隔开. 一:属性 1:allowFontScaling bool(iOS特有):控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放. 2:numberOfLines number :用来当文本过长的时候裁剪文本.包括折叠

React Native 调用原生Android组件

在如今的App中,已经有成千上万的原生UI部件了--其中的一些是平台的一部分,另一些可能来自于一些第三方库,而且可能你自己还收藏了很多.React Native已经封装了大部分最常见的组件,譬如ScrollView和TextInput,但不可能封装全部组件.而且,说不定你曾经为自己以前的App还封装过一些组件,React Native肯定没法包含它们.幸运的是,在React Naitve应用程序中封装和植入已有的组件非常简单. 比如WebView,官方并没有提供Android端的实现,那么我们现

Android React Native使用原生UI组件

Android React Native 已经将几个常用的原生组件进行了封装,比如 ScrollView 和 TextInput,但是并不是所有系统的原始组件都被封装了,因此有的时候我们不得不自己动手封装一下,从而能够使用那些React Native没有为我们封装的原生组件,比如WebView,官方并没有提供Android端的实现,那么我们现在就动手封装一下WebView. 之前写过一篇文章Android React Native使用原生模块,而使用原生UI组件的方法和使用原生模块的方法十分类似

[React Native] Using the WebView component

We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them. Navigate to WebView component: openPage(url){ this.props.na

React Native知识1-FlexBox 布局内容

一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其能适应不同屏幕,为盒装模型提供最大的灵活性. Flex布局主要思想是:让容器有能力让其子项目能够改变其宽度.高度(甚至是顺序),以最佳方式填充可用空间: 2:Flex布局基于flex-flow流 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).主轴的开始位

React Native知识9-ScrollView组件

一个包装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统. 记住ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作).要给一个ScrollView确定一个高度的话,要么直接给它设置高度(不建议),要么确定所有的父容器都已经绑定了高度.在视图栈的任意一个位置忘记使用{flex:1}都会导致错误,你可以使用元素查看器来查找问题的原因. ScrollView内部的其他响应者尚无法

React Native知识7-TabBarIOS组件

一:简介 两个TabBarIOS和TabBarIOS.Item组件可以实现页面Tab切换的功能,Tab页面切换的架构在应用开发中还是非常常见的.如:腾讯QQ,淘宝,美团外卖等等 二:TabBarIOS.Item属性 1.View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式) 2.badge string,number 在图标的右上方显示小红色气泡,显示信息 3.icon Image.propTypes.source Tab按钮自定义的图标,如果systemicon属性被定义了