Как стилизовать активный элемент в React Native?

В React Native для стилизации активного элемента существует несколько подходов, которые могут быть применены, в зависимости от требований и специфики проекта.

1. Использование состояний компонентов:
В React Native можно использовать состояния компонентов для динамического изменения стилей активного элемента. Например, можно создать состояние isActive и применить его в компоненте:

   import React, { useState } from 'react';
   import { View, TouchableOpacity, StyleSheet } from 'react-native';

   const MyComponent = () => {
     const [isActive, setIsActive] = useState(false);

     const handlePress = () => {
       setIsActive(!isActive);
     };

     return (
       <View style={styles.container}>
         <TouchableOpacity
           style={[styles.button, isActive && styles.activeButton]}
           onPress={handlePress}
         >
           <Text style={styles.buttonText}>Press me</Text>
         </TouchableOpacity>
       </View>
     );
   };

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
     },
     button: {
       padding: 10,
       backgroundColor: '#ccc',
       borderRadius: 5,
     },
     activeButton: {
       backgroundColor: 'blue',
     },
     buttonText: {
       color: '#fff',
     },
   });

   export default MyComponent;

В данном примере компонент MyComponent содержит кнопку, которая при нажатии меняет свое состояние и стиль. Когда кнопка активирована (isActive равно true), с помощью свойства style применяется дополнительный стиль activeButton, который делает фон кнопки синим.

2. Использование библиотеки react-native-material-ui:
Если требуется более сложная стилизация или использование материального дизайна, можно воспользоваться библиотекой react-native-material-ui. Она предлагает широкий набор готовых компонентов и стилей, включая поддержку активных элементов.

Пример использования библиотеки react-native-material-ui для стилизации активного элемента кнопки:

   import React from 'react';
   import { View, StyleSheet } from 'react-native';
   import { RaisedButton } from 'react-native-material-ui';

   const MyComponent = () => {
     return (
       <View style={styles.container}>
         <RaisedButton primary text="Press me" />
       </View>
     );
   };

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
     },
   });

   export default MyComponent;

В данном примере компонент MyComponent использует кнопку RaisedButton из библиотеки react-native-material-ui, которая автоматически применяет стили для активного состояния.

3. Использование подхода "ванильного" React Native:
В React Native также можно применять обычные CSS-стили, используя свойство style, а также встроенные свойства, такие как activeOpacity для прозрачности при нажатии. Например:

   import React from 'react';
   import { View, TouchableOpacity, StyleSheet } from 'react-native';

   const MyComponent = () => {
     return (
       <View style={styles.container}>
         <TouchableOpacity
           style={styles.button}
           activeOpacity={0.7}
           onPress={() => console.log('Pressed')}
         >
           <Text style={styles.buttonText}>Press me</Text>
         </TouchableOpacity>
       </View>
     );
   };

   const styles = StyleSheet.create({
     container: {
       flex: 1,
       alignItems: 'center',
       justifyContent: 'center',
     },
     button: {
       padding: 10,
       backgroundColor: '#ccc',
       borderRadius: 5,
     },
     buttonText: {
       color: '#fff',
     },
   });

   export default MyComponent;

В этом примере для стилизации кнопки в активном состоянии используется свойство activeOpacity, которое устанавливает прозрачность при нажатии на кнопку.

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