在web开发中我喜欢svg图标:
1、矢量图标,不会因屏幕大小失真;
2、文件大小,svg图标比png图标小;
3、灵活性,可以修改图标颜色,实现图标复用;
所以在进行react-native开发的时候,在图标选择上,选择使用svg图标,在使用react-native时,通过Image require svg图片时,不会显示,搜索资料才知道,react-native不支持require "svg图片",也不支持svg
在react-native中使用svg图标需要引入react-native-svg插件:
npm install react-native-svg --save
react-native link react-native-svg
引入react-native-svg插件之后,就可以在react-native中编写svg
Image控件不支持svg图标的导入,需要将svg图标转换js文件
import
React
from
"react";
import
Svg,{
Path
}
from
'react-native-svg';
const
Add =
props
=> (
<
Svg
width=
{
props.
width ||
512
}
height=
{
props.
height ||
512
}
viewBox=
"0 0 512 512"
>
<
Path
fill=
{
props.
color ||
'#ccc'
}
d=
"M416 277.67V96h42.666v138.667H416v42.666z"
></
Path
>
</
Svg
>
);
export
default
Add;
使用svg js组件
import
Add
from
'./assets/Add';
<
Add
width=
{
100
}
height=
{
100
}
color=
{
'#000'
}
></
Add
>
效果图