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.navigator.push({
component: Web,
title: 'Web View',
passProps: {url}
});
}

Web View Compnent:

import React from 'react';
import {
View,
WebView,
StyleSheet
} from 'react-native'; var styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#F6F6EF',
flexDirection: 'column',
},
}); class Web extends React.Component{
render(){
return (
<View style={styles.container}>
<WebView source={{uri: this.props.url}} />
</View>
);
}
} Web.propTypes = {
url: React.PropTypes.string.isRequired
}; module.exports = Web;

[React Native] Using the WebView component的更多相关文章

  1. [React Native] Using the Image component and reusable styles

    Let's take a look at the basics of using React Native's Image component, as well as adding some reus ...

  2. React Native(六)——PureComponent VS Component

    先看两段代码: export class ywg extends PureComponent { …… render() { return ( …… ); } } export class ywg e ...

  3. [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility

    In this lesson, you will learn how to use the SafeAreaView component to avoid the sensor cluster (th ...

  4. [react native] react-native-tab-navigator在子Component中隐藏

    因为文档只列出了TabBarIOS, 不支持Android,所以github上找到这个组件. 先说下我的页面构造:  入口文件 —> 注册组件(包含Navigator, 跳转到欢迎页)—> ...

  5. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  6. 使用React Native来撰写跨平台的App

    React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...

  7. 谈谈APP架构选型:React Native还是HBuilder

    原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid ap ...

  8. react native 中webview内的点击事件传到外部原生调用

    先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...

  9. React Native & iframe & WebView

    React Native & iframe & WebView React Native 怎么渲染 iframe 页面 WebView & source html https: ...

随机推荐

  1. Jquery动画第一部分

    效果图: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.asp ...

  2. WP8触摸感应Manipulation的操作

    触控感应不同事件的处理: 可将以下三个事件,绑定到一个控件中. /// <summary> /// 触摸开始事件 /// </summary> /// <param na ...

  3. UVa 808 (建坐标系、找规律) Bee Breeding

    题意: 如图,按照图中的规律给这些格子编号.给出两个格子的编号,求从一个格子到另一个格子的最少步数.(一步只能穿过有有公共边的格子) 分析: 根据高中数学知识,选任意两个不共线的向量,就能表示平面上所 ...

  4. apache开源项目--ApacheDS

    ApacheDS (Apache Directory Server)的核心是目录服务,可以保存数据,并对不同类型的数据进行搜索操作.协议的实现在目录服务器顶层工作,提供与数据存储.搜索和检索有关的 I ...

  5. 【转】1.5 起步 - 初次运行 Git 前的配置

    原文网址:http://git-scm.com/book/zh/v1/%E8%B5%B7%E6%AD%A5-%E5%88%9D%E6%AC%A1%E8%BF%90%E8%A1%8C-Git-%E5%8 ...

  6. Jenkin+TestNG进行自动化测试执行

    1.登陆jenkins'后,主页面有一个jenkins管理选项,进入该模块,对插件,系统进行配置.(安装一个extend choice parameter插件) 2.点击new item新建一个项目, ...

  7. MSP430单片机输入与输出

    MSP430单片机的输入输出线绝大多数是服用的,除了个别的端口外,基本上是8为为一组,不同的型号的MSP430的端口有所不同,就msp430F5438而言,一共有11个I/O端口,其中除了第十一P11 ...

  8. wuzhicms页面报错 Notice 错误,如何关闭错误显示!

    错误类型类似: PHP Notice: Use of undefined constant E_DEPRECATED - assumed 'E_DEPRECATED' in D:\freehost\3 ...

  9. JS代码片段

    1. 对比cookie // cookie array function getCookieArrayByStr(str) { var cookies = str.split("; &quo ...

  10. 在KVM虚拟机中使用spice系列之二(USB映射,SSL,密码,多客户端支持)

    在KVM虚拟机中使用spice系列之二(USB映射,SSL,密码,多客户端支持) 发布时间: 2015-02-27 00:16 1.spice的USB重定向 1.1 介绍 使用usb重定向,在clie ...