React Native Web Expo的WebView备选方案

Question

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

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

是否有一个世博会友好的替代方案，从web平台中的URL显示外部网站？

Answer 1

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

您可以在平台上进行平台检查和升级。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
};

在应用程序中使用。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'
    }
});

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