Блог

У меня есть список карточек, при нажатии на любую из них я хочу увеличить высоту для этой карты, поэтому я использую LayoutAnimation для обработки этого случая, потому что, когда я использую анимированный API из RN, я получаю ошибку при установке параметра nativedrive «height» В любом случае, в моем случае он увеличивает высоту для каждой карты в списке,

Итак, как я могу это решить?

Фрагмент кода

Живая демонстрация

 const OpenedAppointments = ({slideWidth}) => {
  const [currentIndex, setCurrentIndex] = React.useState(null);

  const [cardHeight, setCardHeight] = useState(140);

  const collapseCard = (cardIndex) => {
    setCurrentIndex(cardIndex);
    currentIndex === cardIndex
      ? (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
        Animated.spring(),
        setCardHeight(200))
      : (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
        Animated.spring(),
        setCardHeight(140));
  };

  const renderItems = (item, index) => {
    return (
      <TouchableOpacity
        delayPressIn={0}
        onPress={() => collapseCard(index)}
        key={item.id}>
        <Animated.View
          style={[
            styles.itemContainer,
            {
              height: cardHeight,
            },
          ]}>
          <View style={styles.headerContainer}>
            <View style={styles.imgContainer}>
              <Image
                resizeMode="cover"
                style={styles.img}
                source={{uri: item.vendorInfo.vendorImg}}
              />
            </View>
            <View style={{width: '80%'}}>
              <View style={styles.titleContainer}>
                <Text numberOfLines={1} style={styles.vendorName}>
                  {item.vendorInfo.name}
                </Text>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={styles.rateText}>{item.vendorInfo.rate}</Text>
                  <AntDesign name="star" size={18} color="#262626" />
                </View>
              </View>
              <View style={styles.socialContainer}>
                <View
                  style={{
                    width: 32,
                    height: 32,
                    backgroundColor: '#000',
                    borderRadius: 5,
                  }}
                />
              </View>
            </View>
          </View>
          <View style={styles.footer}>
            <Text style={styles.serviceName}>
             
                {item.serviceName}
            </Text>
            <Text style={styles.price}>
              {item.price}
            </Text>
          </View>

// this will appeared when pressed to card "Footer Card"
          <View>
            <View style={styles.line} />
            <View style={styles.editFooter}>
              <View style={styles.dateContainer}>
                <MemoCalender
                  style={styles.calenderIcon}
                  size={26}
                  color="#000"
                />
                <View style={styles.dateBox}>
                  <Text style={styles.dateText}>{item.date}</Text>
                  <Text style={styles.dateText}>{item.time}</Text>
                </View>
              </View>
             
            </View>
          </View>
        </Animated.View>
      </TouchableOpacity>
    );
  };


return(
<>
        {Data.opened.map((item, index) => renderItems(item, index))}
</>
);
}
  

Измените это:

 <Animated.View
  style={[
    styles.itemContainer,
    {
      height: cardHeight,
    },
  ]
>
{...}
</Animated.View>
  

Автор:

 <Animated.View
  style={[
    styles.itemContainer,
    {
      height: currentIndex === index ? cardHeight : 140,
    },
  ]
>
{...}
</Animated.View>
  

Если вы хотите быть более эффективным, определите высоту вашей карты по умолчанию в константе (например: const = DEFAULT_CARD_HEIGHT = 140) и используйте эту константу везде, где вы используете 140 в качестве высоты карты