从导航栏的左侧按钮单击时呈现的菜单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

回答

相关问题