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. [2015编程之美] 第一场C

    题目3 : 质数相关 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 两个数a和 b (a<b)被称为质数相关,是指a × p = b,这里p是一个质数.一个集合S被 ...

  2. 序列化类型为XX的对象时检测到循环引用

    /// 产品列表展示 /// </summary> /// <returns></returns> ) { //获得所有组别 Galasys_IBLL.IT_BIZ ...

  3. HDU 5607 graph 矩阵快速幂 + 快速幂

    这道题得到了学长的助攻,其实就是一个马尔科夫链,算出一步转移矩阵进行矩阵快速幂就行了,无奈手残 这是我第一回写矩阵快速幂,写的各种毛病,等到调完了已经8点44了,交了一发,返回PE,(发现是少了换行) ...

  4. C#给文件重命名

    使用的主要方法是: File.Move(oldFileDir,newFileDir);//这个是移动文件的方法 Directory.GetFiles(dir);//获取dir路径下的所有文件的全路径 ...

  5. as3 工具类分享 CookieMgr

    今天分享一个工具类 CookieMgr,功能就是读取和写入 SharedObject 对象.很简单,都是静态方法,就不多说了 package org.polarbear.core { import f ...

  6. [原]SyntaxHighlighter使用笔记

    [Date]2013-09-21 [Environment]SyntaxHighlighter 3.0.83 [Author]wintys (wintys@gmail.com) http://wint ...

  7. 字符串旋转(str.find()---KMP)

    此题旋转带有技巧性,问题转化为常见的问题,熟练STL可以直接用str.find()函数,其是主要想用KMP算法实现字符串的查找算法... //如果对于一个字符串A,将A的前面任意一部分挪到后边去形成的 ...

  8. BNUOJ-29364 Bread Sorting 水题

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29364 题意:给一个序列,输出序列中,二进制1的个数最少的数.. 随便搞搞就行了,关于更多 ...

  9. Base64 报错 的解决办法 (Base-64 字符数组或字符串的长度无效。, 输入的不是有效的 Base-64 字符串,因为它包含非 Base-64 字符、两个以上的填充字符,或者填充字符间包含非法字符。)

    Base64 报错 的解决办法, 报错如下:1. FormatException: The input is not a valid Base-64 string as it contains a n ...

  10. fuse文件系统

    用户空间文件系统(Filesystem in Userspace,简称FUSE)是操作系统中的概念,指完全在用户态实现的文件系统.目前Linux通过内核模块对此进行支持.一些文件系统如ZFS,glus ...