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. JSOI2007建筑抢修

    实际上和大多这类题一样(比如wikioi上的地鼠游戏),考察的都是堆的操作 这次改完之后就算把堆的模版定下来了 悲剧的是:大根堆打成了小根堆,导致一开始一直是10分…… 按结束时间排序,(经过验证,结 ...

  2. OK335xS LAN8710 phy driver hacking

    /******************************************************************** * OK335xS LAN8710 phy driver h ...

  3. android 组件设置屏幕大小

    WindowManager wManager = getWindowManager(); DisplayMetrics metrics = new DisplayMetrics(); wManager ...

  4. 在SharePoint 2010中创建网站的权限级别

    转:http://www.360sps.com/Item/CreatePermissionLevels.aspx 权限级别是SharePoint 2010新增加的功能,使我们对权限的设置又提高了一个层 ...

  5. socket基本操作

    我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠so ...

  6. NGINX开篇

    前言 最近空闲时间比较多, 开始阅读nginx源码, 阅读的过程总结和笔记整理了下, 汇集成了一个系列的文章, 由于nginx功能实在太多, 没法做到面面俱到, 只对已经阅读过的源码进行记录总结, 以 ...

  7. <转>Redis 应用场景

    http://blog.csdn.net/hguisu/article/details/8836819 1.  MySql+Memcached 架构的问题 Memcached采用客户端-服务器的架构, ...

  8. Java内存结构、类的初始化、及对象构造过程

    概述 网上关于该题目的文章已经很多,我觉得把它们几个关联起来讲可能更好理解一下.与其它语言一样,它在执行我们写的程序前要先分配内存空间,以便于存放代码.数据:程序的执行过程其实依然是代码的执行及数据的 ...

  9. VBScript: Windows脚本宿主介绍

    Windows脚本宿主(Windows Script Host, WSH)是一个Windows管理工具.WSH创建了一个脚本运行的主环境,WSH使脚本能够使用对象和服务,并提供脚本执行的准则.WSH还 ...

  10. 大规模Hadoop集群实践:腾讯分布式数据仓库(TDW)

    TDW 是腾讯最大的离线数据处理平台.本文主要从需求.挑战.方案和未来计划等方面,介绍了TDW在建设单个大规模集群中采取的 JobTracker 分散化和 NameNode 高可用两个优化方案. TD ...