React Native Web Expo 的 WebView 替代方案

Question

我想在我的应用程序中显示一个外部网站。与适用于 Android/iOS 的 WebView 完全一样。

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

是否有一种对 Expo 友好的替代方案，可以从 Web 平台中的 url 显示外部网站？

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

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