我们可以从 react-native 项目中获取网站或 Web 应用程序吗？答案

【问题标题】：Can we get a website or web app from a react-native project?我们可以从 react-native 项目中获取网站或 Web 应用程序吗？
【发布时间】：2021-05-30 12:28:00
【问题描述】：

我的问题很简单。我有一个基本的 react-native 项目，它是从 Expo 作为一个 Bare WOrkflow 应用程序生成的。

Expo Managed Workflow 提供了该应用的 Web 版本。

如何在裸 React Native 应用程序中实现这一点？我在任何地方都找不到像样的文档。我已经尝试过react-native-web docs，但我无法实现它们。

【问题讨论】：

我刚问谷歌tutorial
我找到了那个链接并忽略了它。在您发表评论后，我重新访问并尝试了它，但没有成功。你自己试过吗？
是的，这对我有用，但实际上我只是按照教程进行操作，我不得不更改 webpack 的配置，我们同意您使用的是 react-native 应用程序而不是 expo？
我使用了 expo init，然后选择了“裸工作流”。对于涉及本机代码的项目，这是建议的。我应该选择一个基本的 react-native 项目吗？

标签： reactjs react-native expo react-native-web

【解决方案1】：

所以从使用命令的 react-native 应用程序的基本安装开始

npx react-native init newProject

安装依赖

我使用 yarn 但对于 npm 是 npm i -D myLib 而不是 yarn add -D myLib

对于我们需要的反应：

yarn add react react-dom react-native-web

对于 Webpack，我们需要：

yarn add -D webpack webpack-cli babel-loader webpack-dev-server

Webpack 配置

在根文件夹中创建一个名为 webpack.config.js 的文件一个名为 public 的文件夹是输出文件夹

//webpack.config.js
const path = require("path");

module.exports = {
  entry: {
    main: "./index.web.js",
  },

  mode: "development",

  devtool: "inline-source-map",

  devServer: {
    writeToDisk: true,
    liveReload: true,
  },

  module: {
    rules: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
    ],
  },
  resolve: {
    alias: {
      "react-native": "react-native-web",
    },
  },
  output: {
    path: path.resolve(__dirname, "public"),
  },
};

以及根文件夹中的 index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Testing on the Web!</title>
    <meta charset="utf-8" />
    <meta content="initial-scale=1,width=device-width" name="viewport" />
  </head>
  <body>
    <div id="react-native-app"></div>
    <script type="text/javascript" src="/public/main.js"></script>
  </body>
</html>

根目录下用于测试的 index.web.js

import React, {Component} from "react";
import {AppRegistry, StyleSheet, Text, View} from "react-native";

class ReactNativeWeb extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#142a3d",
  },
  welcome: {
    fontSize: 20,
    textAlign: "center",
    margin: 10,
    color: "#ffffff",
  },
});

AppRegistry.registerComponent("ReactNativeWeb", () => ReactNativeWeb);
AppRegistry.runApplication("ReactNativeWeb", {
  rootTag: document.getElementById("react-native-app"),
});

脚本包.json

我们在 package.json 中添加一个命令来启动构建和 webpack 服务器

{
...
"scripts": {
 ...
 "web": "webpack serve --progress --config webpack.config.js"
}
...
}

现在，启动命令 yarn web

从浏览器打开http://localhost:8080/

请注意，webpack 配置只提供 javascript 文件，您必须为其他文件类型添加规则

【讨论】：