当从导航栏的左键单击时，菜单SI呈现在屏幕上

Question

有没有办法使菜单从左到右而不是左右？从导航栏的右键单击时，没关系；它是从左键从屏幕上渲染的。

Answer 1

这是一个简短的示例，如何使用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

Answer 2

已解决。在测试过程中，我混合了反应型菜单和反应型popup-menu。我都安装了。Webstorm将我的两个库中都吸引了我。