React Native Web Expo 的 WebView 替代方案答案

【问题标题】：WebView Alternative for React Native Web ExpoReact Native Web Expo 的 WebView 替代方案
【发布时间】：2020-09-29 13:54:51
【问题描述】：

我想在我的应用中显示一个外部网站。与 Android/iOS 的 WebView 完全相同。

Expo 的 React Native WebView 不支持 web 平台。 https://docs.expo.io/versions/latest/sdk/webview/

是否有一种对 Expo 友好的替代方法可以通过网络平台中的 url 显示外部网站？

【问题讨论】：

你能分享一下你期望得到什么吗？

标签： react-native webview expo

【解决方案1】：

这个问题需要更多细节，但是，

您可以进行平台检查并在Platform.OS === 'web' 上使用样式化的 iframe 来显示外部网站。

更新：

你还没有说你在 webview 中渲染了什么。所以我只是给你基本的代码。你需要为演示做造型。

组件：

//native-webview.tsx
import React, { CSSProperties } from 'react';
import { Platform } from 'react-native';
import { WebView } from 'react-native-webview';

interface NativeWebViewProps {
    target: string;
}

export const NativeWebView = (props: NativeWebViewProps): JSX.Element => {
    if (Platform.OS === 'web') {
        return <iframe src={props.target} style={styles} />;
    }
    return <WebView source={{ uri: props.target }} />;
};

const styles: CSSProperties = {
    height: 600,
    width: 800
};

在App.tsx中的用法：

// App.tsx
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { NativeWebView } from './src/components/native-webview';

export default function App() {
    return (
        <View style={styles.container}>
            <NativeWebView target="https://en.m.wikipedia.org" />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center'
    }
});

编辑：修正了错误的导入。

【讨论】：

如何将 iframe 组件添加到 react native web expo？我之前研究过 iframe 解决方案，但没有找到不使用 WebView 的相关解决方案。感谢您的回复。
@BernardvanTonder 我已经更新了我的答案。 html iframe 可以在 expo 中使用。看看这种方法是否适合你。
这种方法完全有效。这就是我们为实现所做的工作。
该死的。这太棒了！非常感谢！