[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: ...
随机推荐
- Jquery动画第一部分
效果图: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.asp ...
- WP8触摸感应Manipulation的操作
触控感应不同事件的处理: 可将以下三个事件,绑定到一个控件中. /// <summary> /// 触摸开始事件 /// </summary> /// <param na ...
- UVa 808 (建坐标系、找规律) Bee Breeding
题意: 如图,按照图中的规律给这些格子编号.给出两个格子的编号,求从一个格子到另一个格子的最少步数.(一步只能穿过有有公共边的格子) 分析: 根据高中数学知识,选任意两个不共线的向量,就能表示平面上所 ...
- apache开源项目--ApacheDS
ApacheDS (Apache Directory Server)的核心是目录服务,可以保存数据,并对不同类型的数据进行搜索操作.协议的实现在目录服务器顶层工作,提供与数据存储.搜索和检索有关的 I ...
- 【转】1.5 起步 - 初次运行 Git 前的配置
原文网址:http://git-scm.com/book/zh/v1/%E8%B5%B7%E6%AD%A5-%E5%88%9D%E6%AC%A1%E8%BF%90%E8%A1%8C-Git-%E5%8 ...
- Jenkin+TestNG进行自动化测试执行
1.登陆jenkins'后,主页面有一个jenkins管理选项,进入该模块,对插件,系统进行配置.(安装一个extend choice parameter插件) 2.点击new item新建一个项目, ...
- MSP430单片机输入与输出
MSP430单片机的输入输出线绝大多数是服用的,除了个别的端口外,基本上是8为为一组,不同的型号的MSP430的端口有所不同,就msp430F5438而言,一共有11个I/O端口,其中除了第十一P11 ...
- wuzhicms页面报错 Notice 错误,如何关闭错误显示!
错误类型类似: PHP Notice: Use of undefined constant E_DEPRECATED - assumed 'E_DEPRECATED' in D:\freehost\3 ...
- JS代码片段
1. 对比cookie // cookie array function getCookieArrayByStr(str) { var cookies = str.split("; &quo ...
- 在KVM虚拟机中使用spice系列之二(USB映射,SSL,密码,多客户端支持)
在KVM虚拟机中使用spice系列之二(USB映射,SSL,密码,多客户端支持) 发布时间: 2015-02-27 00:16 1.spice的USB重定向 1.1 介绍 使用usb重定向,在clie ...