Hey guys, how I am able to click the icon for poping up the menu instead of click the text ?

Expo SDK
1

Hey guys ,

I am new in React Native , I have met a problem .I would love to make a function ,which is click a icon ,and it will pop up a menu box .
I had searched some documents .The most near is : react-native-popup-menu ;
However , I have no idea ,how to modify the text click to icon click …

please take a look my code ,thank you so much !!

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {MenuContext,
    Menu,
    MenuOption,
    MenuOptions,
    MenuTrigger
} from'react-native-popup-menu';
import Icon from '../components/Icon';

function DropDrown(props) {
    return (
        <MenuContext style ={styles.container}>
        <View>
            <Menu>
                <MenuTrigger text="Open menu" />
                <MenuOptions>
                    <MenuOption onSelect={()=>alert('Save')}>
                    <Text style={{color :'black'}}>打开</Text>
                    </MenuOption>
                    <MenuOption onSelect={()=>alert("Delete")}>
                        <Text style={{color :'red'}}>Delete</Text>
                    </MenuOption>
                </MenuOptions>
            </Menu>
        </View>
        </MenuContext>
    );
}

const styles = StyleSheet.create({
    container :{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: 50,
        backgroundColor: '#ecf0f1',
    }
})
export default DropDrown;
2

Hi

I am not familiar with react-native-popup-menu, but you could possibly use react-native-paper’s menu component.

You should be able to use whatever component you like to open the menu.

1 Like
3

Hi Wodin ,

It looks great ! Thank you so much ,I will take a look !

1 Like
4

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.