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. poj2229

    很不错的一道题,这里提供两种方法: 方法1:递推: 易知当n为奇数时,f[n]=f[n-1] (n-1的所有方案前面添1,并且没有新的方案): 重点是n为偶数的时候,则拆分方案中,要么有偶数个1,要么 ...

  2. RPi 2B 中文语言包

    /************************************************************************* * RPi 2B 中文语言包 * 声明: * 本文 ...

  3. 【MooTools】

    MooTools a compact javascript frameworkhttp://mootools.net/docs/core 30天学会 MooTools 教学(1): 认识MooTool ...

  4. boostrap兼容ie及其案例

    多梦网络 wordpress主题 http://www.dmeng.net/

  5. Event事件详解

    首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置 ...

  6. JDBC基础教程

    本文实例讲述了JDBC基础知识与技巧.分享给大家供大家参考.具体分析如下: 1.什么是JDBC? 通俗来讲JDBC技术就是通过java程序来发送SQL语句到数据库,数据库收到SQL语句后执行,把结果返 ...

  7. google学术反向代理及IPV6免流量上网【教育网BUPT】

    google反向代理 google https://awk.so/ 学术反向代理 https://awk.so/scholar/?hl=zh-CN 2015年1.1号开始流量计费,2元/G 无VPS用 ...

  8. Zabbix探索:纠结的选择

    Zabbix拥有两种分布式部署的架构,分别是: Master-Node-Client: Master-Proxy-Client: 两者的区别什么的官方有介绍,但是太过于笼统,对细节介绍的太少,幸亏之前 ...

  9. sys.stdout 重定向

    通俗的来说,sys.stdout的功能类似与C++里面的文件输出功能fprintf. 接下来直接入正题,让我们来看代码: >>> import sys >>> te ...

  10. MATLAB绘图与图形处理

    参考:http://www.cnblogs.com/djcsch2001/tag/MATLAB/  matlab部分写的不错! 7.2  三维图形 7.2.1  三维曲线.面填色命令 命令1  com ...