[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: ...
随机推荐
- poj2229
很不错的一道题,这里提供两种方法: 方法1:递推: 易知当n为奇数时,f[n]=f[n-1] (n-1的所有方案前面添1,并且没有新的方案): 重点是n为偶数的时候,则拆分方案中,要么有偶数个1,要么 ...
- RPi 2B 中文语言包
/************************************************************************* * RPi 2B 中文语言包 * 声明: * 本文 ...
- 【MooTools】
MooTools a compact javascript frameworkhttp://mootools.net/docs/core 30天学会 MooTools 教学(1): 认识MooTool ...
- boostrap兼容ie及其案例
多梦网络 wordpress主题 http://www.dmeng.net/
- Event事件详解
首先提到event,先要明白event的产生,也要先明白焦点,什么是焦点.焦点 : 使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入. 我们可以通过一些方式给元素设置 ...
- JDBC基础教程
本文实例讲述了JDBC基础知识与技巧.分享给大家供大家参考.具体分析如下: 1.什么是JDBC? 通俗来讲JDBC技术就是通过java程序来发送SQL语句到数据库,数据库收到SQL语句后执行,把结果返 ...
- google学术反向代理及IPV6免流量上网【教育网BUPT】
google反向代理 google https://awk.so/ 学术反向代理 https://awk.so/scholar/?hl=zh-CN 2015年1.1号开始流量计费,2元/G 无VPS用 ...
- Zabbix探索:纠结的选择
Zabbix拥有两种分布式部署的架构,分别是: Master-Node-Client: Master-Proxy-Client: 两者的区别什么的官方有介绍,但是太过于笼统,对细节介绍的太少,幸亏之前 ...
- sys.stdout 重定向
通俗的来说,sys.stdout的功能类似与C++里面的文件输出功能fprintf. 接下来直接入正题,让我们来看代码: >>> import sys >>> te ...
- MATLAB绘图与图形处理
参考:http://www.cnblogs.com/djcsch2001/tag/MATLAB/ matlab部分写的不错! 7.2 三维图形 7.2.1 三维曲线.面填色命令 命令1 com ...