如何使用带有 react 的 react 原生 npm 包

Question

是否可以在反应中使用反应原生 npm 包？

因为在浏览器控制台导入使用react-native的包时，出现错误“main.js:3068 Uncaught ReferenceError: react is not defined”

我正在生成一个 pdf (react-pdf) 并且该包使用 react-native 组件，我需要提供样式。 “StyleSheet”不允许使用 rem，这就是我想使用“EStyleSheet”的原因

我的 webpack 配置

 const webpack = require('webpack'); const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: path.join(__dirname, "src", "index.js"), output: { path: path.resolve(__dirname, "dist"), publicPath: '/' }, externals: { "react-native": true, }, devServer: { historyApiFallback: true, host: '0.0.0.0', port: 81, }, module: { rules: [ { test: /\.?js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } }, { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' } ] }, { test: /\.(png|svg|jpg|jpeg|gif|ico)$/, exclude: /node_modules/, use: ['file-loader?name=[name].[ext]'] } ] }, resolve: { alias: { stream: "stream-browserify", zlib: "browserify-zlib" }, fallback: { util: require.resolve('util/'), assert: require.resolve('assert/'), stream: require.resolve('stream-browserify'), zlib: require.resolve('browserify-zlib'), buffer: require.resolve("buffer/"), events: require.resolve("events/"), string_decoder: require.resolve("string_decoder/"), }, }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, "src", "index.html"), Filename: './index.html', Favicon: './public/favicon.ico' }), new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'], process: 'process/browser', }), ], }

我的 package.json =

 { "name": "my-app", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack serve", "build": "webpack", "watch": "./node_modules/.bin/webpack --watch --config webpack.dev.js" }, "author": "", "license": "ISC", "dependencies": { "assert": "^2.0.0", "axios": "^0.27.2", "babel-preset-es2015": "^6.24.1", "bootstrap": "^5.1.3", "browser-process": "^0.0.1", "browserify-zlib": "^0.2.0", "buffer": "^6.0.3", "filepond": "^4.30.4", "filepond-plugin-file-validate-size": "^2.2.7", "filepond-plugin-file-validate-type": "^1.2.8", "filepond-plugin-image-preview": "^4.6.11", "iconv-lite": "^0.6.3", "install": "^0.13.0", "npm": "^8.15.0", "posts": "^0.0.1", "process": "^0.11.10", "react": "^18.2.0", "react-bootstrap": "^2.4.0", "react-dom": "^18.2.0", "react-filepond": "^7.1.2", "react-native": "^0.69.2", "react-native-extended-stylesheet": "^0.12.0", "react-native-html-to-pdf": "^0.12.0", "react-native-htmlview": "^0.16.0", "react-native-render-html": "^6.3.4", "react-native-webview": "^11.13.0", "react-paginate": "^8.1.3", "react-pdf-html": "^1.1.8", "react-render-html": "^0.6.0", "react-router-dom": "^6.3.0", "react-scripts": "^5.0.1", "react-to-print": "^2.14.7", "somemodule": "^1.0.0", "stream": "^0.0.2", "stream-browserify": "^3.0.0", "style-loader": "^3.3.1", "superagent": "^8.0.0", "util": "^0.12.4" }, "devDependencies": { "@babel/core": "^7.18.9", "@babel/preset-env": "^7.18.9", "@babel/preset-react": "^7.18.6", "babel-loader": "^8.2.5", "css-loader": "^6.7.1", "html-webpack-plugin": "^5.5.0", "interpolate-html-plugin": "^4.0.0", "postcss": "^8.4.14", "postcss-loader": "^7.0.0", "sass": "^1.53.0", "sass-loader": "^13.0.2", "web-vitals": "^2.1.4", "webpack": "^5.73.0", "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.9.2" } }

控制台错误

Answer 1

React Native 包不太可能工作。 特别是如果它用于可视化组件，因为 React Native 和 React 呈现项目的方式不同。 核心通常是可共享的，但是当它明确声明它是一个 React Native 包时，它不太可能工作。