React 左侧出现的原生三点菜单答案

【问题标题】：React native three dots menu appearing on left sideReact 左侧出现的原生三点菜单
【发布时间】：2020-06-29 12:44:19
【问题描述】：

我正在使用 react-native-paper 创建一个屏幕。当我使用带有三个点菜单的 Appbar 作为标题时，选项出现在屏幕的错误一侧。它应该出现在右侧，而不是左侧。
我的代码：

import React, { useEffect,useState } from 'react'
import {
    SafeAreaView,
    StyleSheet,
    Platform
} from 'react-native'
import {connect} from 'react-redux'
...
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {Appbar,Menu} from 'react-native-paper'
import MComponent from './subpages/component'
const Tab = createMaterialTopTabNavigator();
const TAG = 'TAG'
const MPage = ({ navigation,handleLoadData,isLoading }) => {
    useEffect(() => {
        handleLoadData()
    }, [])
    const [openMenu,setOpenMenu] = useState(false)
    return (
        <SafeAreaView style={styles.container}>
      <Menu
            style={styles.menu}
            visible={openMenu}
            onDismiss={()=>{
              setOpenMenu(false)
            }}
            
            anchor={
              <Appbar.Header
              statusBarHeight={0}
          >
          <Appbar.BackAction
            onPress={()=>{
              navigation.goBack()
            }}
          />
          <Appbar.Content
            title="App Screen"
          />
          <Appbar.Action icon="dots-vertical" onPress={()=>{
              setOpenMenu(true)}}
            />
        </Appbar.Header>
            }
          >
            <Menu.Item onPress={() => {
              setOpenMenu(false)
              handleLoadServiceOrders()
            }} title="Option 1" />
            <Menu.Item onPress={() => {}} title="Option 2" />
          </Menu>
            <Loading
                loading={isLoading}
            />
            <Tab.Navigator>
                <Tab.Screen name={OPTIONS.PAGE_A} component={MComponent} />
                <Tab.Screen name={OPTIONS.PAGE_B} component={MComponent } />
            </Tab.Navigator>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        marginTop: Platform.OS === 'android' ? 30 : 0,
        justifyContent: 'center',
        flex:1
    }
})
...

图片显示发生了什么：
https://imgur.com/a/xq3Gcac

我正在使用 react-native 和 react-native-paper lib 来创建 Appbar。 Menu 组件也属于 react-native-paper。

【问题讨论】：

标签： react-native menu appbar react-native-paper

【解决方案1】：

你必须传递正确的锚道具。它接受一个 React.ReactNode 或像这样的对象类型 { x: number; y：数字}。我为您发布了一个示例，锚点锚点={{ x: windowWidth, y: 100 }}。这将起作用。此外，您不必将 Appbar 与 Menu 结合使用。如果您将它们分开，它将起作用。

 <Appbar.Header>
    <Appbar.BackAction onPress={_goBack} />
    <Appbar.Content title="Title" subtitle="Subtitle" />
    <Appbar.Action icon="magnify" onPress={openMenu} />
    <Appbar.Action icon="dots-vertical" onPress={openMenu} />
  </Appbar.Header>
  <Provider>
    <View>
      <Menu
        visible={visible}
        onDismiss={closeMenu}
        anchor={{ x: windowWidth, y: 100 }}>
        <Menu.Item onPress={() => { }} title="Item 1" />
        <Menu.Item onPress={() => { }} title="Item 2" />
        <Divider />
        <Menu.Item onPress={() => { }} title="Item 3" />
      </Menu>
    </View>
  </Provider>

【讨论】：

【解决方案2】：

菜单位置是相对于其锚点设置的。在您的原始示例中，整个 Appbar 是锚点，因此菜单出现在其左侧。相反，您可以将锚点设置为 Appbar.Action，这将使菜单出现在垂直点旁边。这是使用菜单的类似示例：

  <Card.Title
        title={item.name}
        subtitle={item.description}
        style={{overflow: 'visible'}}
        left={(props) => <Avatar.Icon {...props} icon={require('../assets/icon.png')} />}
        right={(props) => 
            <Menu
                visible={menuvisible}
                onDismiss={handleMenuDismiss}
                anchor={ <IconButton {...props} icon="dots-vertical" onPress={handleMenuShow}></IconButton>}
            >
                <Menu.Item onPress={() => {alert('item1')}} title="Item 1" />
                <Menu.Item onPress={() => {}} title="Item 2" />
                <Menu.Item onPress={() => {}} title="Item 3" />
            </Menu>
        }
    />

【讨论】：