从导航栏的左按钮单击时，菜单 si 呈现在屏幕外答案

【问题标题】：The menu si rendered offscreen when clicked from the left button of the navigation bar从导航栏的左按钮单击时，菜单 si 呈现在屏幕外
【发布时间】：2017-05-06 20:59:45
【问题描述】：

有没有办法让菜单从左到右而不是从右到左呈现？从导航栏的右键单击时，就可以了；而不是从左侧按钮，它呈现在屏幕外。

【问题讨论】：

您可以发布任何代码示例来演示您的问题吗？
@madox2 是的，你在这里：pastebin.com/xvwK7V0B
您使用哪种导航？反应导航？
@sodik 是 reactnavigation.org

标签： react-native react-navigation react-native-popup-menu

【解决方案1】：

这是一个简短的示例，如何使用带有反应导航的弹出菜单。菜单在 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
react-native-popup-menu: 0.7.3
反应导航：1.0.0-beta

【讨论】：

感谢您的努力，我将尝试查看我的代码之间是否有任何区别，但我不使用那种标题，因为对于该页面它没有，因为它是一个标签:) 它只是一个“假标题”，只是一个带有 3 个按钮的普通视图。我会让你知道。同时非常感谢你:)
@AntonioGallo 您可以提供一些最小的运行代码，以便我可以重现它。无论如何，请随时打开新问题或更新此问题。
我确认它在左侧离屏时不适用于 react native 0.44.0；右侧没问题； MenuContext 也需要 flex:1 才能工作，否则它会搞砸。我将再次尝试在没有导航器的情况下从头开始创建一个新项目，只添加弹出菜单。 “react”：“16.0.0-alpha.6”，“react-native”：“^0.44.0”，“react-native-menu”：“^0.20.2”，“react-navigation”：“^ 1.0.0-beta.9"
我想我在测试时发现了混合 2 个不同菜单库的问题 :) 我最好删除 node_modules 并重试

【解决方案2】：

解决了。在测试期间，我混合了 react-native-menu 和 react-native-popup-menu。我都安装了。 Webstorm 把我拉进了两个库的导入中。

【讨论】：

那么它终于与react-native-popup-menu合作了吗？
@madox2 是的！ :)