我正在尝试使用Native Base Solito Starter:
这是我第一次尝试使用Next,我正在尝试在Expo中获得图像支持。根据Expo文档:
https://docs.expo.dev/guides/using-nextjs/
我应该只需要使用next-image
,我正在这样做:
const { withNativebase } = require('@native-base/next-adapter')
const withImages = require('next-images')
module.exports = withNativebase(
withImages({
dependencies: [
'@expo/next-adapter',
'next-images',
'react-native-vector-icons',
'react-native-vector-icons-for-web',
'solito',
'app',
],
nextConfig: {
projectRoot: __dirname,
reactStrictMode: true,
webpack5: true,
webpack: (config, options) => {
config.resolve.alias = {
...(config.resolve.alias || {}),
'react-native$': 'react-native-web',
'@expo/vector-icons': 'react-native-vector-icons',
}
config.resolve.extensions = [
'.web.js',
'.web.ts',
'.web.tsx',
...config.resolve.extensions,
]
return config
},
},
})
)
尽管如此,我的图像在Next中仍未显示。元素使用我应用于图像元素的样式生成,但图像本身未能显示。
我尝试了通用路由导入和直接路径:
import GrayBox from 'resources/images/graybox.png'
import Car from '../../../../packages/app/resources/images/car.png'
除了使用几个不同的图像外:
<Image
source={require('../../../../packages/app/resources/images/car.png')}
style={{ width: 500, height: 750 }}
alt="test"
/>
<Image
source={GrayBox}
key={index}
style={{ width: 500, height: 750 }}
alt="test2"
/>
<Image
source={Car}
key={index}
style={{ width: 500, height: 750 }}
alt="test3"
/>
这些图片都没有显示。
我尝试了React Native的图片:
https://reactnative.dev/docs/image
除了原生的基础包装之外。
仍然没有任何东西显示。
你有什么线索可以告诉我我的配置有什么问题导致图片无法显示吗?
我怀疑是在我的next.config.js
中有一些问题。
编辑:
如果我添加:
plugins: [withImages, withFonts, [withExpo, { projectRoot: __dirname }]],
在我的 next.config.js 文件中,我收到了以下错误:
../../packages/app/resources/images/cart_black.png
TypeError: unsupported file type: undefined (file: undefined)