react native 使用react-native-web运行在web端（react-scripts插件篇）

前言

本文基于

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

本篇文章使用的是 react 官方提供的webpack配置包(react-scripts)，对于react很熟悉的会非常方便

也可以参考另一篇文章，使用的自定义webpack配置：react native 多平台配置，使用react-native-web运行在web端（自定义webpack.config.js配置篇）

1.安装依赖

yarn add react-dom react-native-web --save
1

react 官方提供的webpack配置包，参考react项目

yarn add react-scripts --save
1

2.根目录新建 public/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

在这里插入图片描述

3.根目录新建 src/index.web.js 文件

react-scripts 默认的 webpack 编译文件夹为 src 文件夹

在 src 目录下新建 index.web.js 做为web端的入口文件

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

在这里插入图片描述

4.配置 App.tsx

根目录的 App.tsx 文件无法被 webpack 解析，移动至 src 目录下

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

function App() {
  return <Text>hello world</Text>
}

export default App;

1
2
3
4
5
6
7
8
9

在这里插入图片描述

5.配置 package.json 启动命令

eject 用于暴露 webpack 配置，比如需修改 index.html、index.web.js 入口文件的存放位置等

"web": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject"
1
2
3

在这里插入图片描述

6.启动项目

web端

yarn web
1

在这里插入图片描述

app端

入口文件依旧是根目录的 index.js 文件，App.tsx 被移动至 src 目录下，所以需修改路径。

// index.js
import App from './src/App';
1
2

yarn android
1

在这里插入图片描述

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

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

相关阅读:
【干货】如何打造HR无法拒绝的简历？测试开发大牛带手把手你写简历！
POSIX信号量
代码随想录算法训练营Day 46 || 139.单词拆分、多重背包
TIA博途中通用函数库指令FIFO先入先出的具体使用方法
【推荐系统】推荐基础算法-基于稀疏自编码的推荐方法
基于海鸥算法的无人机航迹规划-附代码
NNDL:作业3：分别使用numpy和pytorch实现FNN例题
【C++】从零开始的CS:GO逆向分析1——寻找偏移与基址的方法
安全检测风险
【汇编】模块化程序——call指令和ret指令作用、具有子程序的源程序框架、mul乘法指令、8位与16位乘法、寄存器冲突问题

原文地址：https://blog.csdn.net/weixin_43233914/article/details/126894625