使用 onPress 將值從父級傳遞給子級

Question

我正在開發一個應用程序，我想將一個鍵從字典傳遞到子屏幕。 我在父母中有字典，下面的代碼顯示了我想要完成的事情

import ImageDetail from "../components/ImageDetail";

var Salad = {
    GreekSalad: ["Greek Salad", "Romaine lettuce, cucumber, onion, olives, tomatoes, bell peppers, feta cheese dressed with lemon, salt, and olive oil dressing",require('../../assets/greeksalad.jpg'), 10],
    ArabicSalad: ["Arabic Salad", "Diced cucumbers, tomato, green onion, parsley dressed with lemon, salt, and olive oil dressing",require('../../assets/arabicsalad.jpg'), 8],
    Tabula: ["Tabouli", "fine chopped parsley, cracked wheat, tomatoes, and cucumber dressed with lemon salt and olive oil dressing", 8],
    KHSS: ["KH Special Salad", "Romaine lettuce, cucumbers, onions, tomatoes, onions, apples, mint, bell peppers, sunflower seeds, and zaatar dressed with lemon, salt, and olive oil dressing", 12],
    LSCup: ["Lentil Soup", "Flavorful lentil, carrot, and onion pureed soup(Cup 8oz)", 5],
    LSBowl: ["Lentil Soup", "Flavorful lentil, carrot, and onion pureed soup(Bowl 12oz)", 7]

};

代碼的下一部分是我很難完成的部分，特別是將 Salads.greeksalad 鍵和值傳遞到下一頁的可觸摸不透明度

const Salads = () => {
    return (<View>
            <ScrollView>
                <View style={styles.backGround}>
                    <View style={styles.container}>
                        <Image style={styles.logostyle} source={require('../../assets/KabobHouseLogo.jpg')}/>
                    </View>
                    <Text style={styles.title}>Salads{"\n"}</Text>    
                    <View style={styles.container1}>
                    <TouchableOpacity onPress={(Salad.GreekSalad) => {props.navigation.navigate("InnerMenu")}}>
                        <ImageDetail title={Salad.GreekSalad[0]} description={Salad.GreekSalad[1]} imageSource={Salad.GreekSalad[2]} price={Salad.GreekSalad[3]}/>
                    </TouchableOpacity>
                        <ImageDetail title={Salad.ArabicSalad[0]} description={Salad.ArabicSalad[1]} imageSource={Salad.ArabicSalad[2]} price={Salad.ArabicSalad[3]}/>
                        <ImageDetail title={Salad.Tabula[0]}  description={Salad.Tabula[1]}  imageSource={require('../../assets/KabobHouseLogo.jpg')}      price={Salad.Tabula[2]}/>
                        <ImageDetail title={Salad.KHSS[0]}  description={Salad.KHSS[1]}  imageSource={require('../../assets/KabobHouseLogo.jpg')} price={Salad.KHSS[2]}/>

Answer 1

這就是你將 React Navigation 中的值傳遞到下一個屏幕的方式

// navigation.navigate('RouteName', { /* params go here */ })
const nextScreen = ()=>{
    props.navigation.navigate("InnerMenu",{saladKey:Salad.GreekSalad[1]})
}

然后將 function 傳入onPress

<TouchableOpacity onPress={nextScreen}>
   <ImageDetail title={Salad.GreekSalad[0]} description={Salad.GreekSalad[1]} imageSource={Salad.GreekSalad[2]} price={Salad.GreekSalad[3]}/>
</TouchableOpacity>

這是您在下一個屏幕中訪問它們的方式

const childScreen = (props)=>{
  const saladKey = props.route.params.saladKey;
}

最后，我建議您不要養成在屏幕之間傳遞值的習慣。 相反，在大多數情況下，您可以使用一個名為useContext的東西，它可以讓您在所有屏幕之間共享 state。 在此處閱讀更多信息（ https://dmitripavlutin.com/react-context-and-usecontext/ ）