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. light开发框架

  2. linux shell if 参数

    shell 编程中使用到得if语句内判断参数 –b 当file存在并且是块文件时返回真 -c 当file存在并且是字符文件时返回真 -d 当pathname存在并且是一个目录时返回真 -e 当path ...

  3. stm32 DAC输出音频

    #define DAC_DHR8R1_Address 0x40007410 // Init Structure definition DAC_InitTypeDef DAC_InitStructure ...

  4. uboot里读sd卡内容

    1. sd卡升级命令 mmcinit 0 fatload mmc 0:1 0 uzImage.bin 80000 fatload mmc 0:1 1000000 initrd.gz 580000 bo ...

  5. 将Magento后台汉化的方法

    方法一: 打开/app/code/core/Mage/Adminhtml/Block/Catalog/Product/Attribute/Set/Main.php文件, 找到几个用来显示的代码,替换成 ...

  6. 今天考试的JAVA编程题

    今天早上考了java, 题目感觉还不错, 共四道题,有一道定义类的没啥意思就没列出来. 这三道题目还是不错的,特别是第一道,大一上学期学linux的时候,那时还没学C语言呢,准确的来说,还不知道什么是 ...

  7. leetcode@ [289] Game of Life (Array)

    https://leetcode.com/problems/game-of-life/ According to the Wikipedia's article: "The Game of ...

  8. .net iis 域名泛解析实战

    最近做个人网站想实现多个二级域名,一来为了好记,二来为了搜索引擎优化,搜索引擎对二级域名的收录还是比较快的.刚开始做了4,5个二级域名,每个都是在域名解析后台手动添加的,不过随着二级域名越来越多,发现 ...

  9. [iOS基础控件 - 5.4] 广告分页代码(UIScrollView制作)

    A.概念 例子就是桌面的APP列表,当APP数量超过一个屏幕,自动进行分页   B.实现思路 1.创建一个UIScrollView,这里设置为宽度跟屏幕相同,高度1/4屏幕高度左右 2.使用代码在UI ...

  10. css控制内容显示,自动加"..."

    .css{     overflow:hidden;     white-space:nowrap;     text-overflow:ellipsis;     width:100px; }  c ...