DropDownMenu React Native

Question

我正在使用react-navigation和react native弹出菜单。

我希望当我单击导航栏上的按钮时，出现一个具有多种选择的菜单。

我已经尝试过：

ContactScreen.js

class ContactsScreen extends React.Component {
 static navigationOptions = ({ navigation }) => {
   return {
     headerTitle: "Contacts",
     headerRight: 
     <MenuProvider>
       <Menu style={{ zIndex: 10, marginTop:20 }}>
       <MenuTrigger><Ionicons name={'ios-menu'} size={24} color={'white'} style={{marginRight: 20}} /></MenuTrigger>
       <MenuOptions style={{ flex: 1, marginTop: 10, marginRight:300 }}>
           <MenuOption onSelect={() => { alert("clicked")}} text="Click me" />
       </MenuOptions>
       </Menu>
     </MenuProvider>
     ,
     headerStyle: {
       backgroundColor: theme.PRIMARY_COLOR,
     },
     headerTintColor: '#fff',
     headerTitleStyle: {
       fontWeight: 'bold',
     },
   }
 };

在我点击按钮之前： 。

点击后：
当我单击图标时，菜单弹出，它在屏幕右侧溢出，我们看不到它的全部。

我该如何解决？