[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: ...
随机推荐
- knockout 绑定 jquery ui datepicker (转)
ko.bindingHandlers.datepicker = { init: function(element, valueAccessor, allBindingsAccessor) { //in ...
- Anti-pattern(反面模式)
转自维基百科 http://zh.wikipedia.org/wiki/%E5%8F%8D%E9%9D%A2%E6%A8%A1%E5%BC%8F 在软件工程中,一个反面模式(anti-pattern或 ...
- poj3378
统计长度为5的上升序列个数, 容易想到O(n^2)的dp f[k,i]:=Σf[k-1,j] (1<=j<i,a[i]>a[j]) ans:=Σf[5,i] 但是显然会超时,需要考虑 ...
- .NET下文本相似度算法余弦定理和SimHash浅析及应用
余弦相似性 原理:首先我们先把两段文本分词,列出来所有单词,其次我们计算每个词语的词频,最后把词语转换为向量,这样我们就只需要计算两个向量的相似程度. 我们简单表述如下 文本1:我/爱/北京/ ...
- UVa 294 (因数的个数) Divisors
题意: 求区间[L, U]的正因数的个数. 分析: 有这样一条公式,将n分解为,则n的正因数的个数为 事先打好素数表,按照上面的公式统计出最大值即可. #include <cstdio> ...
- BZOJ_3172_[TJOI2013]_单词_(AC自动机)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3172 \(n\)个单词组成一篇文章,求每个单词在文章中出现的次数. 分析 这道题很像BZOJ_ ...
- Android使用Webview加载网页
安卓使用Webview来加载和显示网页内容,首先在layout文件中定义Webview <?xml version="1.0" encoding="utf-8&qu ...
- I.MX6 U-boot PWM hacking
/******************************************************************************* * I.MX6 U-boot PWM ...
- liunx环境下安装mysql数据库
一:如果你的机器上之前安装有mysql数据库,先进行卸载 (1)需要先将它的文件删除 (2)同时注意删除老板本的etc/my.cnf文件和/etc/mysql目录,这两个文件控制的是mysql的一些配 ...
- XUtils框架的学习(一)
一 xutils框架引入到AndroidStudio工程,最简单的方法:① 在APP的build.gradle里面加入 compile 'org.xutils:xutils:3.3.36'.② 一定 ...