React Native Web Expo 的 WebView 替代方案

Question

我想在我的应用程序中展示一个外部网站。 和安卓/iOS上的WebView一样。

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

在 web 平台上有没有适用于 Expo 的替代方案来展示来自 URL 的外部网站？

- Bernard van Tonder

---

你能分享一下你希望得到什么吗? - Oscar Gallardo

Answer 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'
    }
});

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

- Arafat Zahan

---

如何在React Native Web Expo中添加iframe组件？我之前研究过iframe解决方案，但没有找到不使用WebView的相关解决方案。感谢您的回复。 - Bernard van Tonder

@BernardvanTonder 我已经更新了我的答案。HTML iframe 可以在 Expo 中使用。看看这种方法是否适合您。 - Arafat Zahan

这种方法完全有效。这就是我们实施的方式。 - Sean O'Leary

天哪。这太棒了！！非常感谢！ - Henrique Bruno