Блог

Главная - Вопросы по программированию - Перемещение стиля на основе условия фокусировки из компонента вкладки навигации React Native

Перемещение стиля на основе условия фокусировки из компонента вкладки навигации React Native

#css #react-native #conditional-statements #styles #react-native-navigation

Вопрос:

Я изо всех сил пытаюсь переместить цвета настройки условий для значка и текста в моей навигации на нижней вкладке. Может быть, мне не стоит беспокоиться об этом, но я хотел бы иметь все стили в одном месте и более красивый код в целом. Может быть, кто-нибудь сможет направить меня в правильном направлении.

 <Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabBarIcon: ({focused}) => (
      <View style={{...styles.tabView}}>
        <Image
          source={require('./assets/icons/favorite.png')}
          resizeMode="contain"
          style={{
            ...styles.tabIcon,
            tintColor: focused ? '#e32f45' : '#748c94',
          }}
        />
        <Text
          style={{
            ...styles.tabText,
            color: focused ? '#e32f45' : '#748c94',
          }}>
          HOME
        </Text>
      </View>
    ),
  }}
/>

Есть ли какой-либо правильный способ переместить условие из изображения и текста, например tintColor: focused ? '#e32f45' : '#748c94' styles.tabIcon . Каковы мои варианты здесь и каковы лучшие практики?

Спасибо!

Ответ №1:

Вы могли бы написать это немного красивее, создав отдельный компонент под названием TabIcon 

 interface Props {
  focused: Bool
}

export const TabIcon = (props) => {

  return (
    <View style={{...styles.tabView}}>
        <Image
          source={require('./assets/icons/favorite.png')}
          resizeMode="contain"
          style={{
            ...styles.tabIcon,
            tintColor: props.focused ? '#e32f45' : '#748c94',
          }}
        />
        <Text
          style={{
            ...styles.tabText,
            color: props.focused ? '#e32f45' : '#748c94',
          }}>
          HOME
        </Text>
      </View>
  
  
  )
}

И поэтому

 <Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    tabBarIcon: ({focused}) => <TabIcon focused={focused}/>,
  }}
/>
Метки: