如何使用菜单组件从React Native文件内我的头？

5n0oy7gb 于 2023-03-09 发布在 React

关注(0)|答案(1)|浏览(105)

我试图使用菜单从React原生纸内我的头部，但当按下按钮，应该显示菜单，它不工作，它只是什么都不做。但当我做了我的头部以外，我按下按钮，应该显示菜单，它的工作和显示所需的所有项目。有人知道我如何可以修复吗？这里是我的代码：

const [visible, setVisible] = React.useState(false);

  const openMenu = () => setVisible(false);

  const closeMenu = () => setVisible(false);

  return (
    <Drawer.Navigator initialRouteName="Home"
    screenOptions={({ navigation }) => ({

      

      headerStyle: {
        backgroundColor: 'white',
      },

      headerTitleStyle: {
        color: 'black',      
      },

      headerLeft: () => <FontAwesome5 name='user-circle' style={{right: -15}} onPress={navigation.toggleDrawer} size={28} solid/>,
    })}>

        <Drawer.Screen name="Home" component={BottomTab} 
        options={{         
          title: '',
          headerTitleAlign: 'center',
        
        
          
        headerRight: () => (

          
          <View>    
        <View style={{flexDirection: 'row'}}>

          
              <View style={{left: -60}}>

              <Provider>
      <View
        style={{
          paddingTop: 0,
          left: 0,
          flexDirection: 'row',
          textAlign: 'center',
          top: 0,
        }}>
        <Menu
          visible={visible}
          onDismiss={closeMenu}
          anchor={<Pressable onPress={openMenu}>
          <Text style={{fontSize: 20, fontWeight: 'bold', backgroundColor: 'red', paddingRight: 30}}>
            Popular
          </Text>
</Pressable>}>
            

          <Menu.Item onPress={() => {}} title="Item 1" />
          <Menu.Item onPress={() => {}} title="Item 2" />
          <Divider />
          <Menu.Item onPress={() => {}} title="Item 3" />
        </Menu>
      </View>
    </Provider>
        

                {/*<Pressable onPress={() => console.log('Pressed Popular')}>
                  <Text style={{fontSize: 20, fontWeight: 'bold', backgroundColor: 'white', paddingRight: 30}}>
                    Popular
                  </Text>
      </Pressable>*/}
                
                
              </View>
              

              <MaterialIcons
              onPress={() => console.log('Pressed Popular')}
              name="expand-more"
              size={30}
              style={{left: -80}}
      /> 
            

              <Feather
              onPress={() => props.navigation.navigate('Create')}
              name="plus-circle"
              color="black"              
              size={30}
              style={{right: 15, top: 0}}
              />
            

          </View>



          </View>
          ),
          }}
          />

react-native

来源：https://stackoverflow.com/questions/74339953/how-to-use-menu-component-from-react-native-paper-inside-of-my-header

1条答案

按热度按时间

yfjy0ee71#

我也遇到过同样的问题，当您在屏幕文件中使用setOptions与useLayoutEffect组合时，它似乎可以工作。

import { useLayoutEffect, useState } from 'react';
import { View } from 'react-native';
import { Appbar, Menu } from 'react-native-paper';

const VehicleDetailsScreen = ({ route, navigation
}: StackScreenProps<VehiclesStackParamList, 
"VehicleDetails">) => {
const [visible, setVisible] = useState(false);
const { vehicle } = route.params;
const [editMode, setEditMode] = useState(false);

useLayoutEffect(() => {
navigation.setOptions({
  headerTitle: vehicle.name,
  headerRight: () => (
    <View style={{ marginRight: 10 }}>
      <Menu
        visible={visible}
        onDismiss={() => setVisible(false)}
        anchor={
          <Appbar.Action
            icon="dots-vertical"
            onPress={() => setVisible(true)}
          />
        }
      >
        <Menu.Item
          onPress={() => {
            setVisible(false);
            setEditMode(true);
          }}
          title="Edit"
        />
        <Divider />
        <Menu.Item
          onPress={() => {
            setVisible(false);
          }}
          title="Delete"
        />
      </Menu>
    </View>
  ),
});
}, [navigation, visible]);

return (Your screen code)

赞(0）回复(0）举报 2023-03-09

我来回答

如何使用菜单组件从React Native文件内我的头？

1条答案

相关问题

热门标签

最新问答