Для загрузки react-native-svg с локальными изображениями, вы также должны установить react-native-svg-transformer поверх него, что вы можете сделать в своем проекте с:
npm install react-native-svg-transformer
После этого вы следует, согласно документам (для React Native v0.57 или новее / Expo SDK v31.0.0 или новее):
1. Объединить содержимое из вашего файл metro.config.js проекта с этим конфигом (создайте файл, если он еще не существует).
metro.config. js:
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve("react-native-svg-transformer")
},
resolver: {
assetExts: assetExts.filter(ext => ext !== "svg"),
sourceExts: [...sourceExts, "svg"]
}
};
})();
2. Если вы используете Expo, вам также нужно добавить это в приложение app.json:
. json:
"expo": {
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": [
"expo.ts",
"expo.tsx",
"expo.js",
"expo.jsx",
"ts",
"tsx",
"js",
"jsx",
"json",
"wasm",
"svg"
]
}
}
}
3. Наконец, минимальное приложение будет выглядеть так:
Приложение. js:
import React from 'react';
import {View} from 'react-native';
import Bg from "./assets/bg.svg";
export default function App() {
return (
<View>
<Bg width={"100%"} height={"100%"} />
</View>
);
}