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. BZOJ3688: 折线统计

    题解: 令f[i][j][0/1]表示前i个数有j段,最后一段是下降/上升的方案数 很容易列出状态转移方程(已按x轴排序) f[i][j][0]=sigma(f[k][j][0]+f[k][j-1][ ...

  2. urllib

    urllib Python 标准库 urllib2 的使用细节 python 2.x 3.x from urllib import request with request.urlopen('http ...

  3. 多线程程序设计学习(8)Thread-Per-Message

    Thread-Per-Message[这个工作交给你模式]一:Thread-Per-Message的参与者--->Client(委托人)--->host(中介开线程)--->hepl ...

  4. SQL中的CASE WHEN用法

    其语法如下: 1)case vlaue when [compare-value]then reslut [when[compare-value]] then result ...] [else res ...

  5. 45种Javascript技巧大全(转)

      6.小心使用typeof.instanceof和constructor typeof:不要忘了typeof null返回object,而大多数对象,typeof(Array, Date, and ...

  6. leetcode—Best Time to Buy and Sell stocks III

    1.题目描述 Say you have an array for which the ith element is the price of a given stock on day i.   Des ...

  7. 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇03:暂停游戏》

    3.暂停游戏 暂停游戏概述: 在游戏进行时,玩家有可能会遇到多种突发事件.在跑酷游戏中突发状况的发生对游戏的影响更甚,游戏进行时玩家死亡,游戏只能从头开始,那么如果因为外界因素而影响游戏的进行,显然是 ...

  8. 把公共cpp包含到cocos2d-x内部编译的方法。。

    找到cocos2d-x-3.0alpha0-pre\extensions\Android.mk文件,把自定义的cpp文件加进去即可..如果是其它系统就进相应的目录,找到配置文件添加即可..

  9. static,interface and final

    1.static: a)抽象类(abstract class):使用了 abstract 关键字所修饰的 类叫做抽象类.抽象类无法实例化,不能 new 出来一个抽象类的对象(实例). 抽象方法(abs ...

  10. leetcode@ [84/85] Largest Rectangle in Histogram & Maximal Rectangle

    https://leetcode.com/problems/largest-rectangle-in-histogram/ https://leetcode.com/problems/maximal- ...