时间戳

首页 > 解决方案 > 如何使 react-native-paper 与 next.js 一起工作？

next.js - 如何使 react-native-paper 与 next.js 一起工作？

问题描述

我安装了这个示例https://github.com/zeit/next.js/tree/master/examples/with-react-native-web并添加了 react-native-paper ，当我使用它时，我得到这个错误

Error: Cannot find module 'react-native'
Require stack:
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/fonts.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/DefaultTheme.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/core/theming.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/index.js
- /Users/amesbahi/Code/with-react-native-web-app/.next/server/static/development/pages/index.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/next-server/server/require.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/next-server/server/load-components.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/next-server/server/api-utils.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/next-server/server/next-server.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/server/next.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/server/lib/start-server.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/cli/next-dev.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)
    at Function.Module._load (internal/modules/cjs/loader.js:847:27)
    at Module.require (internal/modules/cjs/loader.js:1016:19)
    at require (internal/modules/cjs/helpers.js:69:18)
    at Object.<anonymous> (/Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/fonts.js:1:279)
    at Module._compile (internal/modules/cjs/loader.js:1121:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:10)
    at Module.load (internal/modules/cjs/loader.js:976:32)
    at Function.Module._load (internal/modules/cjs/loader.js:884:14)
    at Module.require (internal/modules/cjs/loader.js:1016:19)
    at require (internal/modules/cjs/helpers.js:69:18)
    at Object.<anonymous> (/Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/DefaultTheme.js:1:282)
    at Module._compile (internal/modules/cjs/loader.js:1121:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:10)
    at Module.load (internal/modules/cjs/loader.js:976:32)
    at Function.Module._load (internal/modules/cjs/loader.js:884:14)

这是我的仓库的副本 在此处输入链接描述

我已经为此苦苦挣扎了几天。希望可以有人帮帮我

标签： next.jsreact-native-webreact-native-paper

解决方案

我和你有同样的方法和同样的问题。这是我在 Next.js 中制作 React Native Paper 的方法。

  1. 使用 Expo.io 构建 Next.js 和 React Native for Web(RNW) 检查本教程并确保它在您的本地运行

  2. 请按照 React Native Paper Doc 中的入门部分和在 Web 上使用，但是，关于next.config.js，这就是您需要做的所有事情。

const { withExpo } = require("@expo/next-adapter");
const withImages = require("next-images");
const withFonts = require("next-fonts");

module.exports = withExpo(
  withFonts(
    withImages({
      projectRoot: __dirname
    })
  )
);

由于 Expo 已经提供了这些内置插件来加载图像和字体，你不需要手动为你的 webpack 添加任何加载器，只需使用它就可以了。

推荐阅读