欢迎光临
@expo/next-adapter
使用 React 本地模块的下一个.js 插件
⚠️ 警告: 对Next.js的支持是非官方的,而不是一流的博览会特色.
设置
依赖关系
确保你有 expo, (中文(简体) ), next, (中文(简体) ), @expo/next-adapter 安装在您的工程中.
转接
配置转换语言特性的 Next.js :
下一个是Swc (建议)
当使用 SWC 的 Next.js 时,您可以配置 babel.config.js 仅用于说明本地人.
// babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
};
};
你也必须 强制下一个.js 使用 SWC 将以下内容添加到您的 next.config.js数字 :
// next.config.js
module.exports = {
experimental: {
forceSwcTransforms: true,
},
};
下一个是巴贝尔 (不建议)
调整您的 babel.config.js 改为有条件添加 next/babel 当与 Web 包捆绑时.
// babel.config.js
module.exports = function (api) {
// Detect web usage (this may change in the future if Next.js changes the loader)
const isWeb = api.caller(
caller =>
caller && (caller.name === 'babel-loader' || caller.name === 'next-babel-turbo-loader')
);
return {
presets: [
// Only use next in the browser, it'll break your native project
isWeb && require('next/babel'),
'babel-preset-expo',
].filter(Boolean),
};
};
下一个.js 配置
在您的 next.config.js数字 :
const { withExpo } = require('@expo/next-adapter');
module.exports = withExpo({
// transpilePackages is a Next.js +13.1 feature.
// older versions can use next-transpile-modules
transpilePackages: [
'react-native',
'expo',
// Add more React Native / Expo packages here...
],
});
完全合格的 Next.js 配置可能看起来像:
const { withExpo } = require('@expo/next-adapter');
/** @type {import('next').NextConfig} */
const nextConfig = withExpo({
reactStrictMode: true,
swcMinify: true,
transpilePackages: [
'react-native',
'expo',
// Add more React Native / Expo packages here...
],
experimental: {
forceSwcTransforms: true,
},
});
module.exports = nextConfig;
反应原生网络样式
包裹 react-native-web 基于 CSS 样式重置的假设,这里是您如何在 Next.js 中使用 pages/ 目录.
需求 pages/_document.js 文件
import { Children } from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { AppRegistry } from 'react-native';
// Follows the setup for react-native-web:
// https://necolas.github.io/react-native-web/docs/setup/#root-element
// Plus additional React Native scroll and text parity styles for various
// browsers.
// Force Next-generated DOM elements to fill their parent's height
const style = `
html, body, #__next {
-webkit-overflow-scrolling: touch;
}
#__next {
display: flex;
flex-direction: column;
height: 100%;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
/* Allows you to scroll below the viewport; default value is visible */
overflow-y: auto;
overscroll-behavior-y: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: scrollbar;
}
`;
export default class MyDocument extends Document {
static async getInitialProps({ renderPage }) {
AppRegistry.registerComponent('main', () => Main);
const { getStyleElement } = AppRegistry.getApplication('main');
const page = await renderPage();
const styles = [
<style key="react-native-style" dangerouslySetInnerHTML={{ __html: style }} />,
getStyleElement(),
];
return { ...page, styles: Children.toArray(styles) };
}
render() {
return (
<Html style={{ height: '100%' }}>
<Head />
<body style={{ height: '100%', overflow: 'hidden' }}>
<Main />
<NextScript />
</body>
</Html>
);
}
}
需求 pages/_app.js 文件
import Head from 'next/head';
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<Component {...pageProps} />
</>
);
}
传输模块
默认情况下,React原住民生态系统中的模块不会被转录到网页浏览器中运行. React Introduct依靠地铁的高级缓存来快速重载. Next.js使用Webpack,其缓存水平不相上下,因此默认会转接节点模块. 您需要手动标记您想要转换的每个模块 transpilePackages 选项在 next.config.js数字 :
const { withExpo } = require('@expo/next-adapter');
module.exports = withExpo({
experimental: {
transpilePackages: [
// NOTE: Even though `react-native` is never used in Next.js,
// you need to list `react-native` because `react-native-web`
// is aliased to `react-native`. Adding `react-native-web` will not work.
'react-native',
'expo',
// Add more React Native / Expo packages here...
],
},
});
通知
使用 Next.js 表示您将会与 Next.js Webpack 配置相捆绑 。 这将导致您如何开发您的应用程序与您的网站的一些核心差异 .
解决问题
无法在模块外使用导入语句
查找哪个模块有导入语句并添加到 transpilePackages 选项在 next.config.js数字 :
const { withExpo } = require('@expo/next-adapter');
module.exports = withExpo({
experimental: {
transpilePackages: [
'react-native',
'expo',
// Add failing package here, and restart the server...
],
},
});