javascript - 使用自定义 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>
  )
}

标签： javascriptreactjsreact-nativemobilereact-navigation-v5

Answer 1

我已经使用以下方法解决了这个问题：

从'react-native-svg'导入SVG，{G，路径}；

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