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. knockout 绑定 jquery ui datepicker (转)

    ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { //in ...

  2. Anti-pattern(反面模式)

    转自维基百科 http://zh.wikipedia.org/wiki/%E5%8F%8D%E9%9D%A2%E6%A8%A1%E5%BC%8F 在软件工程中,一个反面模式(anti-pattern或 ...

  3. poj3378

    统计长度为5的上升序列个数, 容易想到O(n^2)的dp f[k,i]:=Σf[k-1,j] (1<=j<i,a[i]>a[j]) ans:=Σf[5,i] 但是显然会超时,需要考虑 ...

  4. .NET下文本相似度算法余弦定理和SimHash浅析及应用

    余弦相似性 原理:首先我们先把两段文本分词,列出来所有单词,其次我们计算每个词语的词频,最后把词语转换为向量,这样我们就只需要计算两个向量的相似程度.   我们简单表述如下   文本1:我/爱/北京/ ...

  5. UVa 294 (因数的个数) Divisors

    题意: 求区间[L, U]的正因数的个数. 分析: 有这样一条公式,将n分解为,则n的正因数的个数为 事先打好素数表,按照上面的公式统计出最大值即可. #include <cstdio> ...

  6. BZOJ_3172_[TJOI2013]_单词_(AC自动机)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3172 \(n\)个单词组成一篇文章,求每个单词在文章中出现的次数. 分析 这道题很像BZOJ_ ...

  7. Android使用Webview加载网页

    安卓使用Webview来加载和显示网页内容,首先在layout文件中定义Webview <?xml version="1.0" encoding="utf-8&qu ...

  8. I.MX6 U-boot PWM hacking

    /******************************************************************************* * I.MX6 U-boot PWM ...

  9. liunx环境下安装mysql数据库

    一:如果你的机器上之前安装有mysql数据库,先进行卸载 (1)需要先将它的文件删除 (2)同时注意删除老板本的etc/my.cnf文件和/etc/mysql目录,这两个文件控制的是mysql的一些配 ...

  10. XUtils框架的学习(一)

    一  xutils框架引入到AndroidStudio工程,最简单的方法:① 在APP的build.gradle里面加入 compile 'org.xutils:xutils:3.3.36'.② 一定 ...