React Native & iframe & WebView

React Native 怎么渲染 iframe 页面

WebView & source html

https://facebook.github.io/react-native/docs/webview#source

https://facebook.github.io/react-native/docs/webview.html#html

// old

import { WebView } from "react-native";

https://github.com/react-native-community/react-native-webview

# install
$ yarn add react-native-webview # link
$ react-native link react-native-webview
// new 

import { WebView } from "react-native-webview";

WebView

https://reactscript.com/tag/iframe/

http://www.hangge.com/blog/cache/detail_1564.html


/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description WebViewIframe
* @augments
* @example
*
*/ import React, {Component} from "react";
import {
StyleSheet,
Dimensions,
Text,
View,
WebView
} from "react-native"; // 获取设备的宽度和高度
let {
height: deviceHeight,
width: deviceWidth
} = Dimensions.get("window"); class WebViewIframe extends Component {
render() {
return (
<View style={styles.container}>
<WebView bounces={false}
scalesPageToFit={true}
source={{
uri:"https://cdn.xgqfrms.xyz",
method: "GET",
}}
style={{
width:deviceWidth,
height:deviceHeight,
}}>
</WebView>
</View>
);
}
} // css-in-js
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop:20
}
}); export default WebViewIframe; export {
WebViewIframe,
};

new version


/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description WebViewIframe
* @augments
* @example
*
*/ import React, {Component} from "react";
import {
StyleSheet,
Dimensions,
Text,
View,
WebView
} from "react-native"; // 获取设备的宽度和高度
let {
height: deviceHeight,
width: deviceWidth
} = Dimensions.get("window"); class WebViewIframe extends Component {
render() {
return (
<View style={styles.container}>
{/* <WebView
bounces={false}
scalesPageToFit={true}
source={{
uri:"https://cdn.xgqfrms.xyz",
method: "GET",
}}
style={{
width: deviceWidth,
height: deviceHeight,
}}>
</WebView> */}
{/* <WebView
bounces={false}
scalesPageToFit={true}
source={{
html: `
<h1 style="color: #0f0;">
WebView & Iframe
</h1>
`,
}}
style={{
width: "100%",
height: 30,
}}>
</WebView> */}
<WebView
bounces={false}
scalesPageToFit={true}
source={{
html: `
<iframe
name="iframeWindow"
src="https://cdn.xgqfrms.xyz"
width="100%"
height="300"
data-dom="iframe"
target="_self"
about:blank
style="border: 1px solid red;"
>
</iframe>
`,
}}
style={{
width: "100%",
height: 300,
}}>
</WebView>
</View>
);
}
} // css-in-js
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop:20
}
}); export default WebViewIframe; export {
WebViewIframe,
};

https://github.com/archriss/react-native-render-html

https://stackoverflow.com/questions/53736424/how-to-render-html-table-in-react-native

Render HTML in React Native

https://stackoverflow.com/questions/29334984/render-html-in-react-native

React Native & iframe & WebView的更多相关文章

  1. react native 中webview内的点击事件传到外部原生调用

    先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...

  2. React Native WebView关闭缓存

    React Native WebView关闭缓存 网上搜索没有找到关闭React Native下webview控件的缓存的方法,经测试找到解决方案,记录如下 核心思路:通过请求时设置请求头,使页面缓存 ...

  3. 基于webview的Hybrid app和React Native及html5

    基于webview的Hybrid app和React Native及html5 React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iO ...

  4. [React Native] Using the WebView component

    We can access web pages in our React Native application using the WebView component. We will connect ...

  5. React Native组件介绍

    1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...

  6. react native 入门实践

    上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...

  7. React Native Changed the World? or Nothing.

    RN是一个awesome的技术, facebook很有想法的团队创造出一项新的技术改变了native开发界. 但是RN本身又疑点重重, RN是为了解决什么问题而存在的? 在诞生了一年后, RN又解决了 ...

  8. 30天React Native从零到IOS/Android双平台发布总结

    前言 本人有近十年的技术背景,除了APP开发之外对后端.前端等都比较熟悉,近期做一个APP项目需要IOS.Android两个平台都需要,只能硬着头皮上.其实很早就想开发APP也很早就接触Android ...

  9. React Native系列文章

    React Native版本升级的正确姿势 WebView JS与RN进行通讯 用API网关把API管起来 React-Native 给客户端来个「同音词模糊搜索」 30天React Native从零 ...

随机推荐

  1. Python input保证输入为int类型

    t = float(input("t(℃)="))

  2. python3打开winodows文件问题

    1,解决办法 "C:\\Users\\Darkness-02\\Desktop\\test.txt" 多加一个反斜杠就行了 2,解决办法r"C:\Users\Darkne ...

  3. JavaScript类型相关常用操作

    JS数组,字符串,json互相转换 JS数组转字符串 使用数组自带的join方法可以把数组转化为字符串: let arr = [1,2,'uu']; let str = arr.join(','); ...

  4. Python使用Ctypes与C/C++ DLL文件通信过程介绍及实例分析

    项目中可能会经常用到第三方库,主要是出于程序效率考虑和节约开发时间避免重复造轮子.无论第三方库开源与否,编程语言是否与当前项目一致,我们最终的目的是在当前编程环境中调用库中的方法并得到结果或者借助库中 ...

  5. JCE安装使用报错

    "description":"No key was installed for encryption service","status":& ...

  6. SpringBoot 2.0 mybatis mapper通用类

    <!---mybatis通用类包含mybatis和连接池 mybatis和连接池就不需要引入--> <dependency> <groupId>tk.mybatis ...

  7. 结合JDK源码看设计模式——策略模式

    前言: 现在电商已经成为我们生活中不可或缺的购物渠道,同时各大商家会针对不同的时间做出不同的折扣,这在我们看来就是一种营销手段,也是一种策略,今天我们就来讲讲JDK中的策略模式是怎么样的. 一.定义 ...

  8. CSS的使用方法

    参考资料:http://css.cuishifeng.cn/ 一.CSS的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用(与链接式 ...

  9. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  10. 第十课html5 新增标签及属性 html5学习5

    一.常用新增标签 1.header:定义页面的页眉头部 2.nav:定义导航栏 3.footer:定义页面底部,页脚 4.article:定义文章 5.section:定义区域 6.aside:定义侧 ...