[React Native] Using the WebView component
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的更多相关文章
- [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 ...
- React Native(六)——PureComponent VS Component
先看两段代码: export class ywg extends PureComponent { …… render() { return ( …… ); } } export class ywg e ...
- [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 ...
- [react native] react-native-tab-navigator在子Component中隐藏
因为文档只列出了TabBarIOS, 不支持Android,所以github上找到这个组件. 先说下我的页面构造: 入口文件 —> 注册组件(包含Navigator, 跳转到欢迎页)—> ...
- react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
- 使用React Native来撰写跨平台的App
React Native 是一个 JavaScript 的框架,用来撰写实时的.可原生呈现 iOS 和 Android 的应用.其是基于 React的,而 React 是 Facebook 的用于构建 ...
- 谈谈APP架构选型:React Native还是HBuilder
原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid ap ...
- react native 中webview内的点击事件传到外部原生调用
先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...
- React Native & iframe & WebView
React Native & iframe & WebView React Native 怎么渲染 iframe 页面 WebView & source html https: ...
随机推荐
- poj 2524 Ubiquitous Religions (并查集)
题目:http://poj.org/problem?id=2524 题意:问一个大学里学生的宗教,通过问一个学生可以知道另一个学生是不是跟他信仰同样的宗教.问学校里最多可能有多少个宗教. 也就是给定一 ...
- PHP分次读取xls
<?php $sourceFile = "1.tmp"; //要下载的临时文件名 $outFile = "用户订单.xls"; //下载保存到客户端的文件 ...
- SQL SERVER 2000 & SQL SERVER 2005 数据缓存依赖
一.SQL SERVER 7.0/2000和SQL SERVER 2005的简介及比较 1.1 SQL SERVER 7.0/2000 SQL SERVER 7.0/2000没有提供内置的支持 ...
- RPi 2B SD read-only filesytem
/**************************************************************************** * RPi 2B SD read-only ...
- Ruby类,模块1
类的扩展和继承 class Fixnum def dosome(str) puts str end def abs puts "覆盖了原有的方法" end end puts 1.c ...
- HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...
- UVA 10600 ACM Contest and Blackout 次小生成树
又是求次小生成树,就是求出最小生成树,然后枚举不在最小生成树上的每条边,求出包含着条边的最小生成树,然后取一个最小的 #include <iostream> #include <al ...
- [BILL WEI]SQL 存储过程学习
--查看数据库exec sp_databases ;--查看表exec sp_tables ;--查看列exec sp_columns WMS_ASN;--查看索引exec sp_helpindex ...
- [原]我的CentOS设置
[Date]2013-10-06 [Keywords]Linux.CentOS.Fedora [Environment]CentOS 6.3 Final . Wiz [Content]: 1.安装Fl ...
- bzoj 2244 [SDOI2011]拦截导弹(DP+CDQ分治+BIT)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2244 [题意] 给定n个二元组,求出最长不上升子序列和各颗导弹被拦截的概率. [思路] ...