Блог

Мне нужно, чтобы внутри моих карточек был слайдер с изображением карусели, чтобы пользователь мог перемещать изображения компаний, но проблема в том, что карта является компонентом осязаемой емкости, и она будет случайным образом срабатывать методом onPress на слайдах. вот мой код на карусели и карточке:

 const Carousel = (props) => {
  const slideList = props.images;
   
  const [current, setCurrent] = useState(0);
  const length = slideList.length;
  const flatListRef = useRef();

  useEffect(() => {
    flatListRef.current.scrollToIndex({ index: current, animated: true });
  }, [current]);

  const renderItem = ({ item }) => {
    return (
      <View style={styles.imagesContainer}>
        <Image style={styles.image} source={{ uri: item }} />
      </View>
    );
  }

  const goNextSlide = () => {
    setCurrent(current === length - 1 ? 0 : current   1);
  }

  const goPrevSlide = () => {
    setCurrent(current === 0 ? length - 1 : current - 1);
  };

  return (
    <View style={[styles.mainContainer, props.style]}>
      <View style={styles.controls}>
        <TouchableOpacity style={styles.controlleft} onPress={goPrevSlide}>
          <CarouselLeftArrow style={styles.leftArrow} size={22} fill='white' />
        </TouchableOpacity>
        <TouchableOpacity style={styles.controlRight} onPress={goNextSlide}>
          <CarouselRightArrow style={styles.rightArrow} size={22} fill='white' />
        </TouchableOpacity>
      </View>
      <FlatList
        data={slideList}
        keyExtractor={item => item.toString()}
        renderItem={renderItem}
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        pagingEnabled={true}
        ref={flatListRef}
      />
    </View>
  )
}
 

и вот карточка:

 const Card = (props) => {

  return (
    <TouchableOpacity style={styles.mainContainer} onPress={props.onPress}>
      <View style={styles.imageContainer}>
      <Carousel images={props.companyImages} style={styles.mainImage} />
        {/* <Image style={styles.mainImage} source={{uri: props.companyImage}} /> */}
        {/* <Heart style={styles.favoriteIcon} size={wp(8)} fill='white' /> */} 
      </View>
      //some stuff
      </View>
    </TouchableOpacity>
  )
}

 

как это выглядит в пользовательском интерфейсе:

еще раз проблема в том, что я не могу размахивать фотографиями жестом, иногда он срабатывает на обработчике карты и переходит к деталям карты. как я могу решить эту проблему?

Я просто устраняю проблему с помощью импорта TouchableOpacity этих двух компонентов из react-native-gesture-handler . спасибо dilantha111 из комментариев, которые намекают мне на это.