[英]React navigation (Tab Navigator) with custom SVGIcons
I'm using React navigation to change screens with the bottom tab navigations, but when I try to use a custom SVG I have many troubles and using an image to show as an icon the color obviously doesn't change, how can I use an SVG file that can recognize the color im passing to change when I'm on the page?我正在使用 React 导航通过底部选项卡导航更改屏幕,但是当我尝试使用自定义 SVG 时遇到很多麻烦,并且使用图像显示为图标颜色显然不会改变,我该如何使用当我在页面上时,可以识别我传递的颜色以更改的 SVG 文件?
function MyTabs() {
return(
<Tab.Navigator
tabBarOptions={{
showLabel: false,
style:{
backgroundColor:'#313A3F',
borderTopColor: 'transparent'
},
activeTintColor: '#E6B056',
}}
>
<Tab.Screen
name="ProfileScreen"
component={ProfileScreen}
options={{
tabBarIcon: ({color}) => (
<Ionicons name="person" size={32} color={color} />
)
}}
/>
<Tab.Screen
name="MatchScreen"
component={MatchScreen}
options={{
tabBarIcon: ({color}) => (
<Image
style={{ width: 38, height: 38 }}
source={require('../images/Icons/ico-menu-busca-evas.png')}
/>
)
}}
/>
<Tab.Screen
name="CheckIn"
component={CheckIn}
options={{
tabBarIcon: ({color}) => (
<FontAwesome5 name="map-marker" size={32} color={color} />
)
}}
/>
<Tab.Screen name="ChatScreen"
component={ChatScreen}
options={{
tabBarIcon: ({color}) => (
<Ionicons name="chatbubbles" size={32} color={color} />
)
}}
/>
</Tab.Navigator>
)
}
I have fixed this issue using:我已经使用以下方法解决了这个问题:
import Svg, { G, Path } from 'react-native-svg';从'react-native-svg'导入SVG,{G,路径};
then using the original svg passing props for color and size.然后使用原始 svg 传递道具的颜色和大小。
The accepted answer from @Renan works, I just wanted to share the full code sample. @Renan 接受的答案有效,我只想分享完整的代码示例。 So, like he said, first add this import...所以,就像他说的,首先添加这个导入......
import Svg, { G, Path } from 'react-native-svg';
after that, use it like this in your code...之后,在您的代码中像这样使用它...
<Svg
width={size}
height={size}
viewBox='0 0 24 24'
fillRule='evenodd'
clipRule='evenodd'
strokeLinejoin='round'
strokeMiterlimit={2}
>
<G transform='matrix(1,0,0,1,-2.99997,-1.5)'>
<Path
d='M13.003,14C13.553,14 14,13.544 14,13.005L14,4.995C13.997,4.449 13.549,4.002 13.003,4L6.997,4C6.447,4 6,4.456 6,4.995L6,13.005C6.003,13.551 6.451,13.998 6.997,14L13.003,14ZM13.003,23C13.553,23 14,22.562 14,21.997L14,17.003C14,16.449 13.547,16 13.003,16L6.997,16C6.996,16 6.994,16 6.993,16C6.448,16 6,16.448 6,16.993C6,16.996 6,17 6,17.003L6,21.997C6,22.551 6.453,23 6.997,23L13.003,23ZM23.003,23C23.553,23 24,22.555 24,22.004L24,12.996C23.998,12.45 23.549,12.002 23.003,12L16.997,12C16.997,12 16.996,12 16.996,12C16.45,12 16,12.45 16,12.996L16,22.004C16.002,22.55 16.451,22.998 16.997,23L23.003,23ZM16,9.01C16,9.556 16.453,10 16.997,10L23.003,10C23.553,10 24,9.549 24,9.01L24,4.99C23.996,4.446 23.547,4.001 23.003,4L16.997,4C16.453,4.001 16.005,4.446 16,4.99L16,9.01Z'
fill={color}
/>
</G>
</Svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.