Блог

У меня есть приложение react native, в котором я хотел бы поместить меню (3 точки) справа. Значок отображается, но при нажатии не срабатывает. Если я отодвину меню от панели навигации, оно будет запущено.

Вот НОВЫЙ код :

 import React, { Component } from 'react';

import {
  SafeAreaView,
  Animated,
  StyleSheet,
  Dimensions,
  ScrollView,
  AsyncStorage,
  Text,
  TouchableHighlight,
  FlatList, 
  Image, 
  ActivityIndicator, 
  TouchableOpacity,  
  Clipboard, 
} from "react-native";

import { Container, Content, View, Header, Left, Right, Button , Icon , Body, Title, Segment , Toast} from "native-base";

import Menu, { MenuItem, MenuDivider } from 'react-native-material-menu';

const MyHeaderMenuComponent = () => {
  const [showMenu, setShowMenu] = React.useState(true);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <Icon style={{color:'#ffffff',fontSize:25,marginRight:5}} name="md-more"/>
          </TouchableOpacity>
        }>
        <Menu.Item onPress={() => {}} title="Item 1" />
        <Menu.Item onPress={() => {}} title="Item 2" />
        <Menu.Item onPress={() => {}} title="Item 3" />
      </Menu>
    </View>
  );
};

export default MyHeaderMenuComponent;
 

затем на главном экране:

 import MyHeaderMenuComponent from '../components/myHeaderMenuComponent'

    static navigationOptions = ({ navigation }) => {
        const {params} = navigation.state;
        const comingFrom = navigation.getParam('comingFrom');
        
        return {
            title: params amp;amp; params.title ? params.title : 'Raid Room',
            titleStyle: {
                color: '#ffffff',  
            },
            tintColor: '#ffffff',
            headerTintColor: '#ffffff',
            headerStyle: {
                backgroundColor: "#395faa"
            },
            headerTitleStyle: {
                color: '#ffffff'
            },
            headerRight: () => <MyHeaderMenuComponent />
        };  
    };
 

но теперь ничего не появляется…

 const CustomMenu = () => {
  const [showMenu, setShowMenu] = React.useState(false);

  return (
    <View style={{}}>
      <Menu
        visible={showMenu}
        onDismiss={() => setShowMenu(false)}
        anchor={
          <TouchableOpacity onPress={() => setShowMenu(true)}>
            <MaterialCommunityIcons
              name="earth"
              size={30}
              style={{ color: 'black' }}
            />
          </TouchableOpacity>
        }>
        <Menu.Item onPress={() => {}} title="Item 1" />
        <Menu.Item onPress={() => {}} title="Item 2" />
        <Divider />
        <Menu.Item onPress={() => {}} title="Item 3" />
      </Menu>
    </View>
  );
};
 

Можете ли вы попробовать это:

 headerRight: () => <CustomMenu />