无法反应本机添加自定义资产,metro.config.js 被忽略
react native adding custom assets not possible, metro.config.js ignored
我正在尝试在具有以下配置的 React 本机应用程序中使用自定义资产:
"dependencies": {
"glob": "^7.1.4",
"metro-config": "latest",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera",
"react-native-easy-toast": "^1.2.0",
"react-native-fs": "^2.14.1",
"react-native-svg": "^9.8.4",
"react-native-tensorflow": "^0.1.8",
"res": "^0.4.0",
"rn-fetch-blob": "github:joltup/rn-fetch-blob#master",
"tflite-react-native": "0.0.5",
"util": "^0.12.1"
},
我声明 moule 在 metro.config.js 和 react-native.config.js 中有意仅使用我的自定义扩展,如下所示:
module.exports = {
project: {
ios: {},
android: {},
},
assets: [
'./src/assets/icons',
'./src/assets/svg',
'./src/assets/ai',
],
assetExts: [
".xml", ".png", ".jpg", ".pb", ".tflite"
]
};
但是消息还是一样:
error: bundling failed: Error: Unable to resolve module `./ai/annotations/Part1.xml` from
`...src/assets/default-assets.js`: The module `./ai/annotations/Part1.xml` could not be found from
`.../src/assets/default-assets.js`. Indeed, none of these files exist:
* `.../src/assets/ai/annotations/Part1.xml(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
所以 metro.config.js 和 react-native.config.js 显然被忽略了
更新:
在具有最新依赖项的全新 react-native 应用程序中尝试时,会显示一条验证消息:
● Validation Warning:
Unknown option "assets" with value ["./src/assets/ai"] was found.
This is probably a typing mistake. Fixing it will remove this message.
● Validation Warning:
Unknown option "assetExts" with value [".xml", ".png", ".jpg", ".pb", ".tflite"] was found.
This is probably a typing mistake. Fixing it will remove this message.
更新 2:
我在一个单独的分支上创建了一个 repo 来展示问题以及一个无效的解决方案建议(使用 app.json 而不是 metro.config.js 或 react-native.config.js)。你可以在这里找到它:
尝试将它们添加到具有相同结构的 react-native.config.js
文件中。我的看起来像这样:
module.exports = {
assets: ["./app/assets/fonts"]
}
别忘了清洁和 运行。
更新,我设法通过从 app.json 指向 metro.config.js 来消除错误,如下所示:
{
"name": "reactNativeTestapp",
"displayName": "reactNativeTestapp",
"packagerOpts": {
"config": "metro.config.js"
}
}
metro.config.js 的内容如下所示:
const {getDefaultConfig} = require('metro-config');
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig();
return {
resolver: {
assetExts: [assetExts, 'txt', 'xml', 'png', 'jpg', 'pb', 'tflite'],
sourceExts: [...sourceExts, 'txt', 'xml', 'png', 'jpg', 'pb', 'tflite'],
},
};
})();
为什么xml 文件的内容没有以App.js 的形式显示,它只打印一个可能与行数相对应的数字?!但是我怎样才能真正访问文件的内容呢?
我正在尝试在具有以下配置的 React 本机应用程序中使用自定义资产:
"dependencies": {
"glob": "^7.1.4",
"metro-config": "latest",
"react": "16.8.6",
"react-native": "0.60.5",
"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera",
"react-native-easy-toast": "^1.2.0",
"react-native-fs": "^2.14.1",
"react-native-svg": "^9.8.4",
"react-native-tensorflow": "^0.1.8",
"res": "^0.4.0",
"rn-fetch-blob": "github:joltup/rn-fetch-blob#master",
"tflite-react-native": "0.0.5",
"util": "^0.12.1"
},
我声明 moule 在 metro.config.js 和 react-native.config.js 中有意仅使用我的自定义扩展,如下所示:
module.exports = {
project: {
ios: {},
android: {},
},
assets: [
'./src/assets/icons',
'./src/assets/svg',
'./src/assets/ai',
],
assetExts: [
".xml", ".png", ".jpg", ".pb", ".tflite"
]
};
但是消息还是一样:
error: bundling failed: Error: Unable to resolve module `./ai/annotations/Part1.xml` from
`...src/assets/default-assets.js`: The module `./ai/annotations/Part1.xml` could not be found from
`.../src/assets/default-assets.js`. Indeed, none of these files exist:
* `.../src/assets/ai/annotations/Part1.xml(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
所以 metro.config.js 和 react-native.config.js 显然被忽略了
更新: 在具有最新依赖项的全新 react-native 应用程序中尝试时,会显示一条验证消息:
● Validation Warning:
Unknown option "assets" with value ["./src/assets/ai"] was found.
This is probably a typing mistake. Fixing it will remove this message.
● Validation Warning:
Unknown option "assetExts" with value [".xml", ".png", ".jpg", ".pb", ".tflite"] was found.
This is probably a typing mistake. Fixing it will remove this message.
更新 2: 我在一个单独的分支上创建了一个 repo 来展示问题以及一个无效的解决方案建议(使用 app.json 而不是 metro.config.js 或 react-native.config.js)。你可以在这里找到它:
尝试将它们添加到具有相同结构的 react-native.config.js
文件中。我的看起来像这样:
module.exports = {
assets: ["./app/assets/fonts"]
}
别忘了清洁和 运行。
更新,我设法通过从 app.json 指向 metro.config.js 来消除错误,如下所示:
{
"name": "reactNativeTestapp",
"displayName": "reactNativeTestapp",
"packagerOpts": {
"config": "metro.config.js"
}
}
metro.config.js 的内容如下所示:
const {getDefaultConfig} = require('metro-config');
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig();
return {
resolver: {
assetExts: [assetExts, 'txt', 'xml', 'png', 'jpg', 'pb', 'tflite'],
sourceExts: [...sourceExts, 'txt', 'xml', 'png', 'jpg', 'pb', 'tflite'],
},
};
})();
为什么xml 文件的内容没有以App.js 的形式显示,它只打印一个可能与行数相对应的数字?!但是我怎样才能真正访问文件的内容呢?