React Native中如何使用react-native-svg加载本地svg矢量图片?
在React Native中使用react-native-svg
加载本地SVG矢量图片,你需要先确保react-native-svg
已正确安装。以下是加载本地SVG图片的步骤和示例代码:
- 安装
react-native-svg
:
npm install react-native-svg
- 链接原生模块(如果你使用的是React Native 0.60及以上版本,则自动链接):
react-native link react-native-svg
- 在你的React Native项目中,将SVG文件放在
src/assets
或任何你喜欢的目录下。 - 使用
react-native-svg
中的SvgUri
组件来加载本地SVG文件。
示例代码:
import React from 'react';
import { View } from 'react-native';
import SvgUri from 'react-native-svg-uri';
const MyComponent = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<SvgUri
width="200"
height="200"
source={require('./assets/my-local-svg-file.svg')} // 替换为你的SVG文件路径
/>
</View>
);
};
export default MyComponent;
确保替换source
属性中的路径为你的SVG文件实际位置。SvgUri
组件会加载并显示SVG图片。
评论已关闭