React native 已有项目升级兼容web

基础 

 概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网

 深入理解Webpack及Babel的使用 - 掘金

Introduction to React Native for Web // React Native for Web

Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具，它将应用程序所依赖的各种资源（js、css、图片等）视为模块，通过 loader 转换这些模块，最后打包成符合生产环境部署的静态资源。

Webpack 的运行机制基于一条简单的原则：一切文件皆模块。因此，Webpack 在构建应用程序时，会先从入口模块开始递归解析模块依赖，然后通过 loader 处理各种类型的模块，最后打包成一个或多个浏览器可识别的静态资源。

Webpack 的基本配置包括 entry、output、module 和 plugins 四个部分。其中，entry 指定了入口模块，output 指定了输出目录和输出文件名，module 则用于配置 loader 和其他的一些规则，plugins 则是用于扩展 Webpack 功能的插件。

在使用 Webpack 进行项目开发时，我们通常需要使用 Babel 将 ES6+ 代码转换成浏览器兼容的 ES5 代码。Babel 的作用是将 JavaScript 新特性转换成浏览器支持的语法，例如箭头函数、解构赋值等。而 Loader 则是 Webpack 中用于处理各种类型文件的工具，例如将 css 转换成 JavaScript 对象、将图片转换成 data URL 等。

Babel是一个JavaScript编译器，可以将最新版本的JavaScript转换为向后兼容的代码，以便在旧版浏览器或其他环境中运行。Babel的作用是让我们使用最新的JavaScript语法特性，而不必担心浏览器是否支持这些特性。

过程

yarn add react-dom react-native-web
yarn add react-native-reanimated
yarn add -D babel-plugin-react-native-web
yarn add -D babel-loader url-loader webpack webpack-cli webpack-dev-server
yarn add -D babel-plugin-react-native-web
#每次打包发布时自动清理掉 dist 目录中的旧文件，
yarn add -D clean-webpack-plugin


#html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。
yarn add -D html-webpack-plugin

webpack.config.js

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

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

const appDirectory = path.resolve(__dirname);
// const {presets} = require(`${appDirectory}/babel.config.js`);

const compileNodeModules = [
  // Add every react-native package that needs compiling
  // 'react-native-gesture-handler',
].map((moduleName) => path.resolve(appDirectory, `node_modules/${moduleName}`));

const baseProjectSource = [
  path.resolve(appDirectory, 'web/index.web.js'), // Entry to your application
  path.resolve(appDirectory, 'web/App.web.js'), // Change this to your main App file
  path.resolve(appDirectory, './src'),
];


const babelLoaderConfiguration = {
  test: /\.(js|jsx|ts|tsx)$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: baseProjectSource,
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      // The 'react-native' preset is recommended to match React Native's packager
      presets: ['module:metro-react-native-babel-preset'],
      // Re-write paths to import only the modules needed by the app
      plugins: ['react-native-web', 'react-native-reanimated/plugin'],
    },
  },
};


const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]',
    },
  },
};

module.exports = {
  entry: {
    app: path.join(appDirectory, 'web/index.web.js'),
  },
  output: {
    path: path.resolve(appDirectory, 'dist'),
    publicPath: '/',
    filename: 'upup.bundle.js',
  },
  resolve: {
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.tsx', '.web.ts', '.tsx', '.ts', '.web.js', '.js'],
    alias: {
      'react-native$': 'react-native-web',
    },
  },
  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
    ],
  },
  devServer: {
    port: 8080,
    historyApiFallback: true,
    open: !process.env.CI,
  }, 
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        '**/*'
      ]
    }),
    // `process.env.NODE_ENV === 'production'` must be `true` for production
    // builds to eliminate development checks and reduce build size. You may
    // wish to include additional optimizations.
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      __DEV__: process.env.NODE_ENV === 'production' || true
    }),
    new HtmlWebpackPlugin({
      template: path.join(appDirectory, 'web/index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      // See: https://github.com/necolas/react-native-web/issues/349
      __DEV__: JSON.stringify(true),
    }),
  ],
};

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>RN Web</title>
    <style>
      #app-root {
        display: flex;
        flex: 1 1 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="app-root"></div>
  </body>
</html>

index.web.js

import {AppRegistry} from 'react-native';
import appInfo from '../app.json';
import App from './App.web';


AppRegistry.registerComponent(appInfo.name, () => App);
AppRegistry.runApplication(appInfo.name, {
  initialProps: {},
  rootTag: document.getElementById('app-root'),
});

App.web.js


import React from 'react';
import FaqTestnet from '../src/screen/FaqTestnet';
import AboutTestnet from '../src/screen/AboutTestnet';
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';
import Color from "../src/app/Color";
import DarkTheme from '../src/app/DarkTheme';

const Stack = createStackNavigator();

const config = {
  screens: {
    FaqTestnet: 'faqtestnet',
    AboutTestnet: 'abouttestnet',
  },
};

const linking = {
  prefixes: ['http://tokshow.io',  'http://localhost:8080', 'http://127.0.0.1:5500/'],
  config,
};

function App() {
  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>} theme={DarkTheme}>
      <Stack.Navigator
        initialRouteName="AboutTestnet"
        screenOptions={{
          animationEnabled: false,
          headerShown: false,
          unmountOnBlur: false,
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}>
        <Stack.Screen
          name="FaqTestnet"
          component={FaqTestnet}
          options={{
            title: 'Testnet FAQ',
          }}
        />
        <Stack.Screen
          name="AboutTestnet"
          component={AboutTestnet}
          options={{
            title: 'About the Incentivized Testnet',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

package.json

  "scripts": {
    "web:release": "export NODE_ENV=production && rm -rf dist/ && webpack --config ./webpack.config.js",
    "web": "export NODE_ENV=development && webpack-dev-server --config ./webpack.config.js",

参考

How to Make Your React Native Apps Work on the Web

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/40057.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

回归预测 | MATLAB实现GRU(门控循环单元)多输入单输出(不调用工具箱函数)

回归预测 | MATLAB实现GRU(门控循环单元)多输入单输出(不调用工具箱函数)

回归预测 | MATLAB实现GRU(门控循环单元)多输入单输出(不调用工具箱函数) 文章目录 回归预测 | MATLAB实现GRU(门控循环单元)多输入单输出(不调用工具箱函数)预测效果基本介绍程序设计参考资料 预测效果 基本介绍 GRU神经网络是LSTM神经网络的一种变体&#xff0c;LSTM 神经网 …
阅读更多...
opencv 基础学习08-图像通道操作

opencv 基础学习08-图像通道操作

opencv 基础学习08-图像通道操作 什么是图像通道&#xff1f;通道操作&#xff1a;**1 通过索引拆分**2 通过opencv 函数拆分通道合并 什么是图像通道&#xff1f; OpenCV的通道拆分功能可用于将多通道图像拆分成单独的通道&#xff0c;这在图像处理和计算机视觉任务中具有许多…
阅读更多...
电子锁语音芯片方案，低功耗声音提示ic，WT588F02B-8S

电子锁语音芯片方案，低功耗声音提示ic，WT588F02B-8S

随着科技的不断发展&#xff0c;电子锁已成为现代社会中&#xff0c;安全性和便利性并存的必备设备。如何为电子锁行业增添智能化、人性化的功能已成为行业内的热门话题。 在这个迅速发展的市场中&#xff0c;深圳唯创知音推出了一款语音交互方案——WT588F02B-8S 低功耗声音提…
阅读更多...
【云原生】Docker的初步认识，安装与基本操作

【云原生】Docker的初步认识，安装与基本操作

一、Docker的相关知识 Docker是一个开源的应用容器引擎&#xff0c;基于go语言开发并遵循了apache2.0协议开源。 Docker是在Linux容器里运行应用的开源工具&#xff0c;是一种轻量级的“虚拟机”。 Docker 的容器技术可以在一台主机上轻松为任何应用创建一个轻量级的、可移植的…
阅读更多...
时序预测 | MATLAB实现Hamilton滤波AR时间序列预测

时序预测 | MATLAB实现Hamilton滤波AR时间序列预测

时序预测 | MATLAB实现Hamilton滤波AR时间序列预测 目录 时序预测 | MATLAB实现Hamilton滤波AR时间序列预测预测效果基本介绍程序设计参考资料预测效果 基本介绍 预测在很大程度上取决于适合周期的模型和所采用的预测方法，就像它们依赖于过滤器提取的周期一样。标准 Hodrick-P…
阅读更多...
Bard：Google AI开始支持中文对话和看图说话了

Bard：Google AI开始支持中文对话和看图说话了

说起时下火爆的生成式AI&#xff0c;并不是只有ChatGPT。Bard也是一个很优秀的产品&#xff0c;并且刚刚发布的很多有趣的新功能。文末告诉你如何访问Bard。 Google AI在最近的更新中发布了Bard&#xff0c;一个新的语言模型。Bard支持多种语言&#xff0c;包括中文&#xff0…
阅读更多...
华为模拟器eNSP过程中所遇问题（40错误）与解决办法

华为模拟器eNSP过程中所遇问题（40错误）与解决办法

1. 版本 2.打开ensp开启AR2204&#xff0c;报错40 3.弹出文档&#xff0c;挨着试一遍先 安装eNSP的PC上是否存在名为“VirtualBox Host-Only Network”的虚拟网卡 需要启用。虚拟网卡的设置是否符合以下要求&#xff1a;IP地址为192.168.56.1&#xff0c;子网掩码为255.255.2…
阅读更多...
LCD-STM32液晶显示中英文-（6.unicode字符集）

LCD-STM32液晶显示中英文-（6.unicode字符集）

目录 Unicode字符集和编码 UTF-32 UTF-16 UTF-8&#xff08;重点&#xff1a;必须掌握&#xff09; BOM ANSI Unicode字符集和编码 由于各个国家或地区都根据使用自己的文字系统制定标准&#xff0c;同一个编码在不同的标准里表示不一样的字符&#xff0c;各个标准互不兼容…
阅读更多...
诚迈科技子公司智达诚远精耕智能驾驶，为商用落地注入创新力量

诚迈科技子公司智达诚远精耕智能驾驶，为商用落地注入创新力量

近期&#xff0c;工业和信息化部副部长辛国斌在新闻发布会上表示&#xff0c;将启动智能网联汽车准入和上路通行试点&#xff0c;组织开展城市级“车路云一体化”示范应用&#xff0c;将支持L3级及更高级别的自动驾驶功能商业化应用。根据工信部最新消息&#xff0c;《智能网联…
阅读更多...
＜C语言＞ 自定义类型

＜C语言＞ 自定义类型

1.结构体 结构体是一种用户自定义的数据类型&#xff0c;允许将不同类型的数据项组合在一起&#xff0c;形成一个更大的数据结构。结构体可以包含多个成员变量&#xff0c;每个成员变量可以是不同的数据类型&#xff0c;如整数、字符、浮点数等&#xff0c;甚至可以包含其他结构…
阅读更多...
数据可视化——根据提供的数据，将数据经过处理后以折线图的形式展现

数据可视化——根据提供的数据，将数据经过处理后以折线图的形式展现

文章目录 前言处理数据获取数据筛选数据将JSON数据转换为Python数据筛选出横坐标数据和纵坐标数据 根据处理后的数据绘制折线图整体代码展示 前言 前面我们学习了如何使用 pyecharts 模块绘制简单的折线图&#xff0c;那么今天我将为大家分享&#xff0c;如何根据提供的数据将…
阅读更多...
Python+Qt窗体或Django网页支付宝收款码-扫码付款实例

Python+Qt窗体或Django网页支付宝收款码-扫码付款实例

程序示例精选 PythonQt窗体或Django网页支付宝收款码-扫码付款实例 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<PythonQt窗体或Django网页支付宝收款码-扫码付款实例>>编写代…
阅读更多...
Nautlius Chain主网正式上线，模块Layer3时代正式开启

Nautlius Chain主网正式上线，模块Layer3时代正式开启

Nautilus Chain 是在 Vitalik Buterin 提出 Layer3 理念后&#xff0c; 对 Layer3 领域的全新探索。作为行业内首个模块化 Layer3 链&#xff0c;我们正在对 Layer3 架构进行早期的定义&#xff0c;并有望进一步打破公链赛道未来长期的发展格局。 在今年年初&#xff0c;经过我…
阅读更多...
【7天学GO】第1章 开发环境

【7天学GO】第1章 开发环境

1.1 开篇介绍(必看) A. Why choose the go language B. 学语言阶段 1.2 环境搭建前戏 A. 学习一门语言步骤 B. 编译型与解释型 1.3 mac系统Go开发环境搭建 (略) 1.4 linux系统Go开发环境搭建 (略) 1.5 windows系统Go开发环境搭建 A. 开发环境搭建 Stage 1&#xff1a…
阅读更多...
Spring整合Junit

Spring整合Junit

Spring整合Junit 在之前文章中Spring的测试方法几乎都能够看到如下的代码&#xff1a; ApplicationContext context new ClassPathXmlApplicationContext("xxx.xml"); XXX xxx context.getBean(XXX.class);它的作用是创建Spring容器&#xff0c;最终获取到对象&…
阅读更多...
【前端知识】React 基础巩固(二十六)——Portals 的使用

【前端知识】React 基础巩固(二十六)——Portals 的使用

React 基础巩固(二十六)——Portals 的使用 Portals 通常&#xff0c;组件会渲染到 root 节点下。可使用 Portals 将组件渲染至其他节点。 添加 id 为 more、modal 的 div 元素 <div id"root"></div> <div id"more"></div> &l…
阅读更多...
第六章：U-Net——医学图像分割的卷积神经网络

第六章：U-Net——医学图像分割的卷积神经网络

0.摘要 大多数人都认为成功训练深度网络需要成千上万个注释训练样本。在本文中&#xff0c;我们提出了一种网络和训练策略&#xff0c;依靠强大的数据增强来更有效地利用现有的注释样本。该架构由一个收缩路径和一个对称扩展路径组成&#xff0c;收缩路径用于捕捉上下文…
阅读更多...
如何下载SRA存放在AWS的原始数据

如何下载SRA存放在AWS的原始数据

通常&#xff0c;我们都是利用prefetch从NCBI上获取数据&#xff0c;然后用fasterp-dump/fastq-dump 转成fastq。但遗憾的SRA的数据是原数据的有损压缩&#xff0c;比如说我19年参与发表的文章里单细胞数据上传的是3个文件&#xff0c;但是当时的faster-dump/fastq-dump只能拆出…
阅读更多...
Qt与Web混合开发：实现双向通信

Qt与Web混合开发：实现双向通信

引言 在当今的软件开发中&#xff0c;将Qt和Web技术结合起来进行混合开发变得越来越流行。Qt作为强大的C框架&#xff0c;提供了丰富的图形界面和功能库&#xff0c;而Web技术则提供了灵活性和跨平台的优势。结合这两种技术&#xff0c;我们可以开发出功能强大、具有吸引力的应…
阅读更多...
自动驾驶代客泊车AVP摄像头与ECU交互需求规范

自动驾驶代客泊车AVP摄像头与ECU交互需求规范

目录 1 文档范围及控制方法... 5 1.1 目的.... 5 1.2 文档授权... 5 1.3 文档变更管理... 5 1.4 缩写.... 5 1.5 术语.... 5 2 系统组成... 6 2.1 系统框图... 6 2.2 电源供应和时序要求... 7 2.2.1 摄像头供电控制... 7 2.2.2 摄像头上电时序要求…
阅读更多...
最新文章

Copyright @ 2022~2023