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,
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={{
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,
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={{
deviceWidth,
height: deviceHeight,
}}>
</WebView> */}
{/* <WebView
bounces={false}
scalesPageToFit={true}
source={{
html: `
<h1 style="color: #0f0;">
WebView & Iframe
</h1>
`,
}}
style={{
"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={{
"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
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!