• react native 使用react-native-web运行在web端（自定义webpack.config.js配置篇）

    前言

    本文基于

    • “react-native”: “^0.72.4”
    • “react-dom”: “^18.2.0”
    • “react-native-web”: “^0.19.8”

    本篇文章使用的自定义 webpack 配置的方式，配置起来相对麻烦一点

    也可以参考另一篇文章，使用的是 react 官方提供的webpack配置包(react-scripts)：react native 多平台配置，使用react-native-web运行在web端（react-scripts插件篇）

    1.安装依赖

    yarn add react-dom react-native-web babel-plugin-react-native-web --save

    • 1

    webpack相关

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

    • 1

    这个插件是官网没有提到的，算是一个坑

    yarn add html-webpack-plugin --dev

    • 1

    2.配置 babel.config.js

    官网 - 构建打包优化

    plugins: ['react-native-web']

    • 1

    在这里插入图片描述

    3.根目录新建 web/webpack.config.js

    webpack配置在官网 - 多平台设置 ，复制到本地

    在这里插入图片描述

    4.配置 webpack.config.js

    配置 html-webpack-plugin 插件

    const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	...官网配置
	plugins: [
	  new HtmlWebpackPlugin({
	    template: path.resolve(__dirname, './index.html'), // 指定模板路径
	    filename: 'index.html', // 指定文件名
	    // favicon: path.resolve(appDirectory, 'web/favicon.ico') // 浏览器小图标
	  })
	]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    配置 babelLoaderConfiguration

    test: /\.js$|.tsx?$/,

    • 1
    path.resolve(appDirectory, 'App.tsx'),

    • 1

    test：需要由Babel编译的文件匹配规则
    include：需要由Babel编译的文件、文件夹、插件包

    react native 0.72.0版本开始，模板默认为 typescript 项目，需要添加.tsx
    官方脚手架有一个App.tsx文件在根目录，而react-native-web官方提供的 webpack 配置并没有配置解析这个文件，需要添加到include

    在这里插入图片描述

    5.根目录新建 web/index.html 文件

    DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <title>React Apptitle>
head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  noscript>
  <div id="root">div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    6.根目录新建 index.web.js 文件

    import { AppRegistry } from 'react-native';
import App from './App.tsx';

AppRegistry.registerComponent('App', () => App);

AppRegistry.runApplication('App', {
  rootTag: document.getElementById('root')
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    7.修改 App.tsx

    import React from 'react';
import { Text } from 'react-native';

function App(): React.ReactElement {
  return <Text>Hello World</Text>;
}

export default App;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    在这里插入图片描述

    8.配置 package.json 启动命令

    "web": "webpack serve --mode=development --config ./web/webpack.config.js",
"build": "webpack --mode=production --config ./web/webpack.config.js"

    • 1
    • 2

    在这里插入图片描述

    8.启动项目

    web端

    yarn web

    • 1

    在这里插入图片描述

    在这里插入图片描述

    app端

    yarn android

    • 1

    在这里插入图片描述

    如果本篇文章对你有帮助的话，很高兴能够帮助上你。

    当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。

  • 相关阅读:
    OpenMLDB 开源一周年，感恩遇见
    二、页面布局
    css3 3D 转换 技巧详细解析与代码实例
    【计算机网络】TCP协议与UDP协议的区别
    UE5修改导航网格的参数
    图像运算和图像增强七
    Vue2电商前台项目——完成Home首页模块业务
    Mxnet速查_CPU和GPU的mnist预测训练_模型导出_模型导入再预测_导出onnx并预测
    指针进阶（1）
    Java日志框架的发展历史，你不想了解一下吗
  • 原文地址：https://blog.csdn.net/weixin_43233914/article/details/126892642