React-Native-Popup-Menu和Stack Navigator

Question

ReactNavigation Stack Navigator具有HeaderRight屬性，用於將菜單按鈕放在標題中，但沒有上下文菜單。

是否可以在堆棧導航器中集成React Native Popup菜單？

在此先感謝。

Answer 1

我設置StackNavigator的navigationOptions設置我的自定義按鈕，RightHeader

static navigationOptions = ({ navigation }) => ({ 
title: `${navigation.state.params.Name}`, 
headerRight: (
     <ContextMenuButton 
     />) 

我想知道是否可以使用陣營本地彈出菜單，顯示和結合的headerRight

使用

Answer 2

這絕對有可能完成。在你的根應用程序執行以下操作：

import React, { Component } from 'react'; 
import { MenuContext } from 'react-native-popup-menu'; 
import MainNavigator from './components/MainNavigator'; 

export default class App extends Component { 
    render() { 
    return (
     <MenuContext> 
     <MainNavigator /> 
     </MenuContext> 
    ); 
    } 
} 

那麼你已經實現了這樣你的headerRight應該很好地工作。

Answer 3

我一直在想關於這個問題，很好，找到了解決方法： 一般情況下，所有的菜單部分必須是Menu標籤內，所以MenuTrigger爲好。 您可以設定MenuTrigger的樣式，但我沒有將它帶入頂部欄。

好消息：它甚至比這更簡單，只需將整個Menu到您的navigationOptions這樣的：

static navigationOptions = ({navigation}) => ({ 
    title: 'Uploaded Videos', 
    drawerLockMode: 'locked-closed', 
    headerRight: 
    <Menu renderer={SlideInMenu} style={{ zIndex: 10 }}> 
     <MenuTrigger text="open menu"/> 
     <MenuOptions style={{ flex: 1 }}> 
     <Text>Menu</Text> 
     <MenuOption onSelect={() => { console.log("clicked") text="Click me" /> 
     </MenuOptions> 
    </Menu> 

警告：navigationOptions是靜態的，所以在你的菜單中，您不能使用該組件的功能。但是有一些方法，例如this issue at react-native-navigation。一般來說，你可能應該使用redux。

希望這仍然可以幫助你！