1

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

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

1 回答 1

1

您this在功能组件中使用。

应该：

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

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

于 2021-06-02T03:46:41.903 回答