Блог

Я использую навигацию 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>
  )
}
 

Я исправил эту проблему, используя:

импортируйте Svg, { G, путь } из ‘react-native-svg’;

затем с помощью исходного svg передаем реквизиты для цвета и размера.