如何折叠按在数组上的项目 - 反应原生？

Posted 2023-03-15

【中文标题】如何折叠按在数组上的项目 - 反应原生？

【英文标题】：How can I collapse Item pressed on arrays - react native?

【发布时间】：2020-08-16 08:01:57

【问题描述】：

我有一张卡片清单， 当按下其中任何一个时，我想增加那张卡的高度， 所以我使用 layoutAnimation 来处理这种情况，因为当我使用 RN 的 Animated API 时，setNativeDrive "height" 时出现错误 反正， 就我而言，它会增加列表中每张卡片的高度，

那我该如何解决呢？

代码 sn-p

Live Demo

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))
</>
);

【参考方案1】：

改变这个：

<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 作为卡片高度的任何地方使用此常量

【讨论】：

是的，你是对的，但是IDK为什么我要按两次才能出现“第一次按时不增加高度”，所以我像this一样实现它，我不知道为什么它有效?但这就是我想要的