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

Question

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

我提供了下面的代码，但我还创建了一个零食，您可以立即测试我的代码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;

Answer 1

您在功能组件中使用this。

应该是：

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

删除this 后确认可以工作。功能组件没有对此的引用，道具应该只通过功能组件的参数中的props 访问。