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. ExecutorService.execute(Runnable x) 判断是否完成,得到返回值

    public class RunnableTestMain { public static void main(String[] args) { ExecutorService pool = Exec ...

  2. 函数buf_page_get

    /**************************************************************//** NOTE! The following macros shoul ...

  3. 安装nging,php

    http://www.zihou.me/html/2010/11/14/2658.html http://www.linuxidc.com/Linux/2011-04/34964p4.htm http ...

  4. BZOJ3792: 跑步

    题解: 感觉被坑出翔... 显然我们把矩阵乘法中的点当成原图中的边就可以了. 先写opertor 在struct里面居然只能带一个变量?... 放到外面,然后还得加引用? 然后题目描述不清,重边怎么算 ...

  5. [swustoj 1021] Submissions of online judge

    Submissions of online judge(1021) 问题描述 An online judge is a system to test programs in programming c ...

  6. 使用hibernate tools插件生成POJO

    很多时候我们已经设计好了数据库,需要使用hibernate来做数据持久化,因此需要根据数据库中的表结构生成相应的POJO. 本例使用hibernatetools来自动创建pojo. 测试环境:ecli ...

  7. 算法的时间复杂度(大O表示法)

    定义:如果一个问题的规模是n,解这一问题的某一算法所需要的时间为T(n),它是n的某一函数 T(n)称为这一算法的“时间复杂性”. 当输入量n逐渐加大时,时间复杂性的极限情形称为算法的“渐近时间复杂性 ...

  8. 也用 Log4Net 之走进Log4Net (四)

    转载地址:http://www.cnblogs.com/dragon/archive/2005/03/24/124254.html 我是转的别人的内容,我觉得他写的非常好,所以我把其中三分之二转了过来 ...

  9. Visual Studio中的一些较大的文件的作用

    1.sdf 这些是工程中的中间,用于预编译等作用,最终可执行文件是不需要的,默认情况下,删除后重新编译还会生成.如果不需要,在Visual Studio里进入如下设置: 进入"Tools & ...

  10. Hbase 建表基本命令总结

    访问hbase,以及操作hbase,命令不用使用分号 hbase shell 进入hbase list 查看表 hbase shell -d hbase(main):024:0> scan '. ...