React Native & iframe & WebView

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

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---