從導航欄的左側按鈕單擊時呈現的菜單si

有沒有辦法讓菜單呈現從左到右而不是從右到左？當從導航欄的右鍵單擊時，沒關係; 取而代之的是從左邊的按鈕，它被渲染出屏幕。從導航欄的左側按鈕單擊時呈現的菜單si

2017-05-06 Antonio Gallo

你能發佈任何代碼示例來演示你的問題嗎？ – madox2

@ madox2是的，在這裏你是：https://pastebin.com/xvwK7V0B –

你使用哪個導航？反應導航？ – sodik

這裏是一個簡短的例子，如何使用帶有react-navigation的彈出式菜單。該菜單在headerRight和headerLeft佔位符中均呈現。這是正確顯示兩側：

import React from 'react'; 
import { AppRegistry, Text } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 
import Menu, { 
    MenuContext, 
    MenuOptions, 
    MenuOption, 
    MenuTrigger 
} from 'react-native-popup-menu'; 

const NavigatorMenu = ({ navigation }) => (
    <Menu> 
    <MenuTrigger text='...' /> 
    <MenuOptions> 
     <MenuOption 
     onSelect={() => navigation.navigate('Page2')} 
     text='Navigate Page 2' 
     /> 
     <MenuOption 
     onSelect={() => navigation.navigate('Page3')} 
     text='Navigate Page 3' 
     /> 
    </MenuOptions> 
    </Menu> 
); 

class Home extends React.Component { 
    static navigationOptions = ({ navigation }) => ({ 
    title: 'Home', 
    headerRight: <NavigatorMenu navigation={navigation} />, 
    headerLeft: <NavigatorMenu navigation={navigation} />, 
    }); 
    render() { 
    return <Text>Home Page</Text>; 
    } 
} 

const Page2 =() => <Text>2nd Page</Text>; 
const Page3 =() => <Text>3rd Page</Text>; 

const TopStackNavigator = StackNavigator({ 
    Home: { screen: Home }, 
    Page2: { screen: Page2 }, 
    Page3: { screen: Page3 }, 
}); 

const App =() => (
    <MenuContext> 
    <TopStackNavigator /> 
    </MenuContext> 
); 

AppRegistry.registerComponent('examples',() => App);

它在Android上測試了：

反應母語：0.37.0
反應，本機彈出菜單：0.7.3
react-navigation：1.0.0-beta

來源

2017-05-11 09:05:59 madox2

感謝您的努力，我會嘗試查看我的代碼是否有任何區別，但我不使用這種類型的標題，因爲該頁面沒有它，因爲它的標籤:)它只是一個「假頭」，只是一個普通的3個按鈕。我會讓你知道的。非常感謝你:) –

@AntonioGallo你可以提供一些最小runnalbe代碼，以便我可以重現它。無論如何，隨時打開新的問題或更新這一個。 – madox2

我確認它不適用於原生0.44.0，當它在屏幕左側時;它的好處;也MenuContext需要flex：1工作，否則它搞砸了。我會再次嘗試從頭開始創建一個新的項目，無需導航器，只需添加彈出式菜單。「反應」：「16.0.0-alpha.6」，「反應天然的」：「^ 0.44.0」，「反應天然菜單」：「^ 0.20.2」，「react-navigation」：「^ 1.0.0-beta.9」 –

已解決。在測試期間，我正在混合react-native-menu和react-native-popup-menu。我都安裝了。 Webstorm把我從兩個庫的引入中拉進來。

來源

2017-05-11 11:18:35

所以最後是用'react-本機彈出式menu'？ – madox2

@ madox2是的！ :) –

從導航欄的左側按鈕單擊時呈現的菜單si

回答

相關問題