在 React Native 中创建我自己的菜单组件

Question

我正在创建一个"菜单"组件，我在每个页面上调用它，它正确显示，但我无法让它工作。 我无法像在登录页面中那样轻松地导航：带有 OnPress 事件的按钮和对一个函数的调用，如果登录正确/执行：this.props.navigation.navigate("Accueil")

所以。。。我教过它可以是相同的，在我的组件"菜单"上，我试图调用相同的代码：

<TouchableOpacity style={[styles.menu_item_selected,styles.menu_item]} onPress={() => nav("Home")}>
<FontAwesome name="home" size={40} color="#fff"/>
<Text style={styles.menu_text}>Home</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.menu_item}  onPress={() => nav("Datas")}>
<FontAwesome name="user" size={40} color="#fff"/>
<Text style={styles.menu_text}>Datas</Text>
</TouchableOpacity>

但它不起作用，它在按下按钮时崩溃。

这是我的导航文件：

import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import Login from '../Components/Login'
import Menu from '../Components/Menu'
import Home from '../Components/Home'
import Datas from '../Components/Datas'
const SearchStackNavigator = createStackNavigator({
Login: {
screen: Login
},
Home:{
screen: Home
},
Datas:{
screen: Datas
}
})
export default createAppContainer(SearchStackNavigator)

我尝试使用道具，但也没有奏效。

更多信息：

• 我的"菜单"组件的使用就像类菜单extand React.Component/some code/并导出默认菜单然后<Menu/>我的页面上。

• 我对道具的尝试在顶部的"主页"和"数据"等页面上看起来_nav(page){ this.props.navigation.navigate(page) }，在"render(({return("部分之前。然后const { nav } = this.props我的"菜单"组件和类似onPress={() => nav("Donnees")}菜单按钮的内容。

有什么想法吗？还是示例代码？我找不到任何满足我需求的自定义菜单示例

Answer 1

您需要像这样将导航道具传递给 Menu 组件(假设您在导航配置中声明的屏幕中使用它(：

<Menu navigation={this.props.navigation} /> 

有了它，您的菜单组件将可以访问导航道具

this.props.navigation.navigate('Datas');