触摸时难以导航到另一个页面

问题描述

我试图在单击图像时导航到另一个页面。我一直在做的方式似乎不起作用。如果有人能让我知道导致错误的原因，那就太好了！

我提供了下面的代码，但我还创建了一个小吃，您可以立即测试我的代码 Here

编辑：您必须使用 IOS 或 android 进行渲染，该库未针对 Web 设置

上面的小吃绝对是最快最简单的了解我在说什么的方法；一切都设置好了。只需单击图像并找出错误！

编辑：更具体地说，关于我的项目的新信息，SKeney 的答案适用于堆栈，但由于某种原因不适用于我的项目。我还添加了我在实际项目中使用的 app.js 文件以进行更多说明，因此下面的堆栈有点多余。

我整个堆栈的代码

  <Stack.Screen name="Home" component= {MyTabs} options={{headerShown: false}}/>
        <Stack.Screen name="ProfileScreen" component= {ProfileScreen} options={{headerShown: false}}/>
        <Stack.Screen name="MyCarousel" component= {MyCarousel} options={{headerShown: false}}/>
        <Stack.Screen name="VenueDetails" component= {VenueDetailsScreen} options={{headerShown: false}}/>
        <Stack.Screen name="ProfileSettings" component= {ProfileSettingsScreen} options={{headerShown: false}}/>
        <Stack.Screen name="FavoriteBarScreen" component= {FavoriteBarScreen} options={{headerShown: false}}/>
        <Stack.Screen name="LocationScreen" component= {LocationScreen} options={{headerShown: false}}/>
        

谢谢你们的任何见解。我比你知道的更感激！

链接到库 https://www.npmjs.com/package/react-native-snap-carousel#showcase 的文档

const MyCarousel = (props) => {
  const [entries,setEntries] = useState([]);
  const carouselRef = useRef(null);

  useEffect(() => {
    setEntries(ENTRIES1);
  },[]);

  const renderItem = ({ item,index },parallaxProps) => {
    return (
      <TouchableOpacity
            onPress={() => this.props.navigation.navigate('VenueDetails')}>
      <View style={styles.item}>
        
        <ParallaxImage
          source={item.thumbnail}
          containerStyle={styles.imageContainer}
          style={styles.image}
          parallaxFactor={0.4}
          {...parallaxProps}
        />

 </View>
        {/* End of View that holds it */}
      </View>
      </TouchableOpacity>
    );
  };

  return (
   
    <View style={styles.container}>
      <Carousel
        ref={carouselRef}
        sliderWidth={screenWidth}
        sliderHeight={screenWidth}
        itemWidth={screenWidth - 60}
        data={entries}
        renderItem={renderItem}
        hasParallaxImages={true}
      />
    </View>
  );
};

export default MyCarousel;

解决方法

您在功能组件中使用 this。

应该是：

            onPress={() => props.navigation.navigate('VenueDetails')}>

在删除 this 后确认工作。函数式组件没有对 this 的引用，props 应该只通过 props 从函数式组件的参数中访问。