反应-本土-网络-网页视图

React 原生网络执行 React 原生网络View

依据 https://github.com/resact-native-web-community/resact-native-web-view 互联网档案馆的存檔,存档日期2013-12-02

反应-本土-网络-网页视图

RN 的 WebView 的 Web 执行

开始

安装

yarna dd react-native-web-webview

该软件包提供了与反应-内在-网络视图相同的功能,然而,它作为网络项目输出时起作用. 要继续使用与非web导出相同的导入,请在您的 Webpack 配置中配置一个别名,以便解析到正确的软件包 .

resolve: {
    alias: {
        'react-native': 'react-native-web',
        ...
        'react-native-webview': 'react-native-web-webview',
    }
}

与博览会

在使用 Expo 时, 您需要添加一个用于网页构建的 Webpack 文件, 以便添加上述代码 . 以下命令将以 Expo 预想的方式创建文件, 并安装 @expo/webpack-配置 必要的依赖.

npx expo customize webpack.config.js

如果您尚未设置 Expo 来导出网络项目, 您需要安装以下依赖 .

npx expo install react-native-web react-dom

以下是执行《公约》的实例 网络包装. config.js 在一个博览会项目.

const createExpoWebpackConfigAsync = require("@expo/webpack-config");

///////
// NOTE: Webpack is only used for bundling web
///////

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.resolve.alias = {
    ...config.resolve.alias,

    // Set up aliases so the web versions are used (Rather than changing imports in each file)
    "react-native": "react-native-web",
    "react-native-webview": "react-native-web-webview",
  };

  // Return the config for use by webpack
  return config;
};