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

Question

我是 React Native 的新手，我一直在构建一个简单的 Food Recipe 应用程序。我的主要Stack Navigator 包含两个屏幕：Bottom Tab Navigator 和Recipe screen。我在Home screen 在Tab Navigator 中，当我按下任何配方时，我想传递配方道具并导航到主要Stack Navigator 中的Recipe screen。不幸的是，我还没有找到任何解决方案。 你能帮我解决这个问题吗？

这是主文件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)

这是我的Home Screen 课程

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>
        )
    }
}

这是Category 类

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>
        )
    }
}

这是我想要一直导航回Recipe screen 并使用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>
        )
    }
}

谢谢大家的回答

Answer 1

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

如果您不介意这一点，您可以使用dangerouslyGetParent 从他的孩子那里访问您的stackNavigator，然后使用您需要的道具进行导航。

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

然后您可以使用 getParam this.props.navigation.getParam("recipe") 或直接使用 this.props.navigation.state.params 访问您的食谱道具