我是React Native的新手，我一直在构建一个简单的Food Recipe应用程序。我的主Stack Navigator包含两个屏幕：Bottom Tab Navigator和Recipe screen。我在Home screen的{{1}}中，当我按下任何食谱时，我想传递食谱道具并导航到主Tab Navigator中的Recipe screen。不幸的是，我还没有找到任何解决方案。
你能帮我解决这个问题吗？
这是主文件Stack Navigator
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={}谢谢您的回答
答案 0 :(得分：0)
如果您需要StackNavigator在BottomTabNavigator的顶部显示标题，我建议为StackNavigator的每个孩子使用bottomTabBar。这样一来，您可以在一个tabBarItem中拥有更多屏幕，并且其他屏幕也不会消失bottomTabBar。
如果您不介意，可以使用stackNavigator从他的孩子那里访问dangerouslyGetParent，然后浏览所需的道具。
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来访问食谱道具