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

Question

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

所以...我教过它可能是相同的并且在我的组件上 "Menu" 我尝试调用相同的代码：

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

我试过用道具，但是没用。

更多信息：

我的 "Menu" 组件的用法类似于 class 菜单扩展 React.Component /some code/ 并导出默认菜单然后 <Menu/> 在我的页数。
我对道具的尝试在 "Home" 和 "Datas" 等页面上看起来像 _nav(page){ this.props.navigation.navigate(page) } 在 "render(){return(" 部分之前的顶部。然后 const { nav } = this.props 在我的 "Menu" 组件和我的菜单按钮上的 onPress={() => nav("Donnees")} 之类的东西。

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

Answer 1

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

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

这样，您的菜单组件将有权访问导航道具

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

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

Creating my own Menu Component in React Native

javascript

navigation

reactjs

react-native