[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: ...
随机推荐
- Mysql加密方式
MySQL数据库的认证密码有两种方式, MySQL 4.1版本之前是MySQL323加密,MySQL 4.1和之后的版本都是MySQLSHA1加密, MySQL数据库中自带Old_Password(s ...
- 【转】 当程序崩溃的时候怎么办 part-1
转自:http://www.tairan.com/archives/1006 有这样一种情形:当我们正在快乐的致力于我们的app时,并且什么看都是无比顺利,但是突然,坑爹啊,它崩溃了.(悲伤地音乐响起 ...
- (三)学习CSS之opacity 属性
参考:http://www.w3school.com.cn/cssref/pr_opacity.asp opacity 属性设置元素的不透明级别. 所有浏览器都支持 opacity 属性. 注释:IE ...
- (三)学习MVC之密码加密及用户登录
1.密码加密采用SHA256 算法,此类的唯一实现是 SHA256Managed.在Common/Text.cs里添加Sha256方法: public static string Sha256(str ...
- HDU 5965 Gym Class 贪心+toposort
分析:就是给一些拓补关系,然后求最大分数,所以贪心,大的越靠前越好,小的越靠后越好 剩下的就是toposort,当然由于贪心,所以使用优先队列 #include <iostream> #i ...
- codeforce 606B Testing Robots
题意:给定一个x*y的矩形,和一个机器人的初始位置(x0,y0).以向下为x轴正方向,向右为y轴正方向.现在要对这个机器人进行多次测试.每次测 试,会在矩形的某个位置有一个矿井.所以一共要进行x*y次 ...
- MFC中Listbox控件的简单使用
MFC中listbox控件是为了显示一系列的文本,每个文本占一行. Listbox控件可以设置属性为: LBS_CHILD :(默认)子窗口 LBS_Visible :(默认)可视 LBS_M ...
- const,readonly,static
1.const 表示的是常量(constant),始终不会发生改变,在编译时就确定了.所以类中定义一个常量可以被类访问也可以被类的实例访问.定义时就不能和static一起用.如果用了也是没有作用的,所 ...
- 有关ftp批量传送文件或文件夹
以ftp 批量上传文件时 可以用 mput file1 file2 .. 但是这样没传送一个就会问是否传送下一个 ,那么可以使用prompt这个命令.这是个双向开关,执行一次是取消提示,在执行一次是打 ...
- Polymorphism
多态定义(百度百科):多态(Polymorphism)按字面的意思就是“多种状态”.在面向对象语言中,接口的多种不同的实现方式即为多态.引用Charlie Calverts对多态的描述 ——多态性是允 ...