React native 从子导航器屏幕导航到父导航器屏幕

我是一个新的本地人，我一直在构建一个简单的食品配方应用程序。我的主

堆栈导航器

包含两个屏幕：

底部选项卡导航器

和

配方屏幕

。我在

选项卡导航器的
主屏幕中
，当我按下任何配方时，我想传递配方道具并导航到主
堆栈导航器中的
配方屏幕
。不幸的是，我还没有找到任何解决办法。
你能帮我解决这个问题吗

这是主文件
App.js

const Navigator = createBottomTabNavigator(
  {
    Home: Home,
    Add: Add,
    Profile: Profile
  }
);

const Stack = createStackNavigator(
  {
    Navigator: Navigator,
    Recipe: Recipe
  },
  {
    headerMode: "none",
    navigationOptions: {
        headerVisible: false,
    }
  }
);

export default createAppContainer(Stack)

这是我的
主屏幕
课程

export default class Home extends Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.headerTitle}>Recipes</Text>
                </View>

                <ScrollView style={styles.categoryContainer}>
                    <Category name={"All Foods"} recipes={recipes} />
                    <Category name={"Meat"} recipes={[ recipes[1], recipes[3] ]} />
                    <Category name={"Vegetarian"} recipes={[ recipes[0], recipes[2] ]} />
                    <Category name={"Desserts"} recipes={[ recipes[4] ]} />
                </ScrollView>
            </SafeAreaView>
        )
    }
}

export default class Category extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.categoryHeader}>
                    <Text style={styles.categoryHeaderTitle}>{this.props.name}</Text>
                </View>

                <ScrollView >
                    <View style={styles.categoryContent}>
                        <FlatList
                            data={this.props.recipes}
                            renderItem={({ item }) => <Block name={item.name} image={item.image} time={item.time} portions={item.portions} />}
                            keyExtractor={(item, index) => index.toString()}
                            horizontal={true}
                        /> 
                    </View>  
                </ScrollView>
            </View>
        )
    }
}

这是实际的配方块，我想在这里导航回到
配方屏幕
，并使用
onPress={}
函数传递配方道具

export default class Block extends Component {
    render() {
        return (
            <TouchableOpacity style={styles.container} onPress={null} >
                <Image style={styles.image} source={this.props.image} />

                <Text style={styles.title}>{this.props.name}</Text>
                <Text style={styles.info}>{this.props.time} min | portions: {this.props.portions}</Text>
            </TouchableOpacity>
        )
    }
}

导出默认类块扩展组件{
render（）{
返回(
{this.props.name}
{this.props.time}min|部分：{this.props.partions}
)
}
}

如果您需要
StackNavigator
在
BottomTabNavigator
顶部显示标题，我建议对
bottomTabBar
的每个子项使用
StackNavigator
，谢谢您的所有回答。这样做，您可以在一个
选项卡项中拥有更多屏幕，并且不会让其他屏幕的底部选项卡栏消失

如果您不介意，您可以使用
危险的GetParent
从他的孩子那里访问您的
stackNavigator
，然后使用您需要的道具导航

navigateToRecipe = (recipe) => {
   this.props.navigation.dangerouslyGetParent().navigate("Recipe", { recipe : myRecipe}) //pass an object with the data you need
}

然后，您可以使用getParam
this.props.navigation.getParam（“配方”）
或直接使用
this.props.navigation.state.params
访问您的配方道具。谢谢，这很好用。然而，出现了一个新问题，那就是我没有正确地将
this.props.navigation
传递到
Block.js
类，因此
类型错误：未定义不是对象（评估–this.props.navigation.dangerouslyGetParent）
错误被输出。如何以正确的方式传递它们以使其工作？您可以将它从父级传递到块执行
navigation={this.props.navigation}
或使用react navigation提供的
withNavigation
HOC：在使用
navigation={this.props.navigation}
传递到
block
类之后，仍然无法识别道具。然而，第二种选择效果很好。非常感谢你的帮助！