React Native: как создать два компонента TouchableOpacity, которые меняют местами значения высоты и ширины при нажатии?

Question

Я хочу, чтобы одно из изображений было немного больше другого при нажатии и наоборот. Я пытаюсь использовать useState для этого, но не смог. Я прикрепил изображение ниже для вашей справки. Спасибо! ?? введите описание изображения здесь

Answer 1

Предполагая только эти 2 параметра, вы можете использовать состояние для установки значения размытия. и переключите высоту для кнопок на основе значения размытия

import React ,{useState}from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  let [blur ,setBlur] = useState(true)
  return (
    <View style={styles.container}>
      <TouchableOpacity 
      onPress={()=>{setBlur(true)}}
      style={{ ...styles.button, backgroundColor:"red"  , height: blur ? 60 : 40 }}>
        <Text>Blurred</Text>
      </TouchableOpacity>

      <TouchableOpacity 
      onPress={()=>{setBlur(false)}}
      style={{...styles.button, backgroundColor:"blue"  , height: blur ? 40 : 60 }} >
        <Text>Default</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: 'space-around',
    alignItems: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },  

  button: {
    justifyContent: "center",
    alignItems:"center",
    paddingVertical: 20,
    paddingHorizontal: 30

  }
});