React Native如何使轮播重定向到已选择相应ID的另一个页面

问题描述

我是React Native的新手,一旦尝试按下轮播组件卡,它就应该导航到其他页面并从卡阵列发送相应的ID。

这是我的“ .App.js”页面,它可以正常运行:

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Receita' component={selectType} />
        <Stack.Screen name='Informe os ingredientes' component={findRecipe} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这是轮播阵列:

const carouselItems = [
  {
    id: 1,title: "Doce",text: "[TEXTO DESCRITIVO]",illustration: require('../../assets/sobremesa.jpg'),},{
    id: 2,title: "Salgado",text: "[DESCRIÇÃO]",illustration: require('../../assets/refeicao.jpg'),]

这是我要更新的Carousel组件,一旦按下该组件,它将把用户转到“ findRecipe”页面

return (
    <View style={styles.container} >
      <TouchableOpacity onPress={goForward}>
        <Text style={styles.titleText}>Selecione o tipo de receita</Text>
      </TouchableOpacity>
      <Carousel
        layout={"default"}
        ref={ref => carousel = ref}
        data={carouselItems}
        sliderWidth={screenWidth}
        sliderHeight={screenWidth}
        itemWidth={screenWidth - 60}
        renderItem={renderItem}
        onSnapToItem={index => setState({ activeIndex: index })}
        hasParallaxImages={true}
      />
      <Button title='INGREDIENTES' onPress={() => navigation.navigate('Informe os ingredientes')}></Button>
    </View >
  );

我有一种在Button组件中执行此操作的方法,但我确实需要在Carousel卡上执行此操作,并发送被按下的各个寄存器的ID。 有人可以帮忙吗?

解决方法

发送示例成功,非常感谢Tuan! dessert.expo.io/KJl_IKU3D – tuan.tran 29分钟前