Question

我有一个UserFeed组件，如果Feed中有图片，则该组件会显示Card主体中带有PhotosWithPagination组件的内容。我想拥有类似instagram的动画。

这里的问题是，如果任何给定屏幕上有多个UserFeed组件，那么animateRef会被覆盖，只有最后一个处于活动状态。这意味着，如果我双击屏幕上的第一张UserFeed图像，那么最后一张就很喜欢！我该如何解决这个问题？

import * as Animatable from "react-native-animatable";
import AntIcon from "react-native-vector-icons/AntDesign";

const AnimatedIcon = Animatable.createAnimatableComponent(AntIcon);

export const PhotosWithPagination = ({ feed }) => {
  const carouselRef = useRef(null);
  const animateRef = useRef(feed.images.map(() => React.createRef()));
  const [activeSlide, setactiveSlide] = useState(0);

  toggleLike = index => {
    if (animateRef.current[index].current) {
      animateRef.current[index].current
        .bounceIn()
        .then(() => animateRef.current[index].current.bounceOut())
        .catch(err => console.log("err", err));
    }
  };

  _renderItem = ({ item, index }, parallaxProps) => {
    return (
      <DoubleTap key={item.id} onDoubleTap={() => toggleLike(index)}>
        <View style={styles.item} key={`${item.id}_view`}>
          <ParallaxImage
            key={`${item.id}_parallaxImage`}
            source={{
              uri: item.uri,
              cache: "force-cache"
            }}
            containerStyle={styles.imageContainer}
            style={styles.image}
            parallaxFactor={0.4}
            {...parallaxProps}
          />
          <AnimatedIcon
            key={`${item.id}_icon`}
            ref={animateRef.current[index]}
            name="heart"
            color="white"
            size={80}
            style={{
              position: "absolute",
              top: "50%",
              alignSelf: "center",
              zIndex: 2,
              borderRadius: 160,
              opacity: 0
            }}
            duration={500}
            delay={200}
          />
        </View>
      </DoubleTap>
    );
  };
  return (
    <View style={styles.container}>
      <Carousel
        ref={carouselRef}
        sliderWidth={screenWidth}
        sliderHeight={screenWidth}
        itemWidth={screenWidth - 30}
        data={feed.images}
        renderItem={_renderItem}
        hasParallaxImages={true}
        onSnapToItem={index => setactiveSlide(index)}
      />
    </View>
  );
};

function UserFeed({ user, feed, navigation }) {
  return (
    <Card key={feed.id} style={{ flex: 0 }}>
      <CardItem>
        <Body>
          {feed.images && feed.images.length > 0 && (
            <PhotosWithPagination feed={feed} />
          )}
        </Body>
      </CardItem>
    </Card>
  );
}

export default UserFeed;

在renderItem（）函数中重写了React.useRef吗？

0 个答案: