React.useRef переопределяется в функции renderItem ()? - PullRequest
Новая
       40

React.useRef переопределяется в функции renderItem ()?

0 голосов
/ 15 октября 2019

У меня есть компонент UserFeed, который отображает 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;
...