[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: ...
随机推荐
- BZOJ3688: 折线统计
题解: 令f[i][j][0/1]表示前i个数有j段,最后一段是下降/上升的方案数 很容易列出状态转移方程(已按x轴排序) f[i][j][0]=sigma(f[k][j][0]+f[k][j-1][ ...
- urllib
urllib Python 标准库 urllib2 的使用细节 python 2.x 3.x from urllib import request with request.urlopen('http ...
- 多线程程序设计学习(8)Thread-Per-Message
Thread-Per-Message[这个工作交给你模式]一:Thread-Per-Message的参与者--->Client(委托人)--->host(中介开线程)--->hepl ...
- SQL中的CASE WHEN用法
其语法如下: 1)case vlaue when [compare-value]then reslut [when[compare-value]] then result ...] [else res ...
- 45种Javascript技巧大全(转)
6.小心使用typeof.instanceof和constructor typeof:不要忘了typeof null返回object,而大多数对象,typeof(Array, Date, and ...
- leetcode—Best Time to Buy and Sell stocks III
1.题目描述 Say you have an array for which the ith element is the price of a given stock on day i. Des ...
- 《Genesis-3D开源游戏引擎完整实例教程-跑酷游戏篇03:暂停游戏》
3.暂停游戏 暂停游戏概述: 在游戏进行时,玩家有可能会遇到多种突发事件.在跑酷游戏中突发状况的发生对游戏的影响更甚,游戏进行时玩家死亡,游戏只能从头开始,那么如果因为外界因素而影响游戏的进行,显然是 ...
- 把公共cpp包含到cocos2d-x内部编译的方法。。
找到cocos2d-x-3.0alpha0-pre\extensions\Android.mk文件,把自定义的cpp文件加进去即可..如果是其它系统就进相应的目录,找到配置文件添加即可..
- static,interface and final
1.static: a)抽象类(abstract class):使用了 abstract 关键字所修饰的 类叫做抽象类.抽象类无法实例化,不能 new 出来一个抽象类的对象(实例). 抽象方法(abs ...
- leetcode@ [84/85] Largest Rectangle in Histogram & Maximal Rectangle
https://leetcode.com/problems/largest-rectangle-in-histogram/ https://leetcode.com/problems/maximal- ...