使用 onPress 将值从父级传递给子级

Question

I am working on an app and I want to pass in a key from a dictionary to a child screen. I have the dictionary in the parent, the code below shows what I want to accomplish

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]

};

The next portion of the code is the part that Is difficult for me to finish, specifically the touchable opacity passing the Salads.greeksalad key and value into the next page

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

This is how you pass values in React Navigation to the next screen

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

Then pass the function into onPress

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

This is how you access them in the next screen

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

Lastly I recommended that you don't make a habit of passing around values between screens. Instead for most cases you can use a thing called useContext which lets you share state between all your screens. Read more here ( https://dmitripavlutin.com/react-context-and-usecontext/ )