时间戳

首页 > 解决方案 > React 左侧出现的原生三点菜单

react-native - React 左侧出现的原生三点菜单

问题描述

我正在使用 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-nativemenuappbarreact-native-paper

解决方案

菜单位置是相对于其锚点设置的。在您的原始示例中，整个 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>
        }
    />

推荐阅读