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

Question

我安装了这个例子 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)

这是我的回购enter link description here的副本

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

Answer 1

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

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

2. 在 React Native Paper Doc 中关注 Getting Started 部分和 Using on the 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 手动添加任何加载器，只需使用它就可以了。