使用自定义 SVGIcon 响应导航（Tab Navigator）

Question

我正在使用 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>
  )
}

Answer 1

我已经解决了这个问题：

从 'react-native-svg' 导入 Svg, { G, Path };

然后使用原始 svg 传递道具的颜色和大小。