Блог

Главная - Вопросы по программированию - реагировать-родной-всплывающее меню слайд в верхней части

реагировать-родной-всплывающее меню слайд в верхней части

#reactjs #react-native

Вопрос:

Я уже прочитал документацию, но, похоже, нет способа сделать анимацию скользящей вверх или просто показать ее снизу вверх.

 <MenuProvider>
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
    <Text>Hello world!</Text>
    <Menu >
        <MenuTrigger text='Select action'/>
        <MenuOptions style={{top:0,right:0}}>
            <MenuOption onSelect={() => alert(`Save`)} text='Save' />
            <MenuOption onSelect={() => alert(`Delete`)} >
            <Text style={{color: 'red'}}>Delete</Text>
            </MenuOption>
            <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
        </MenuOptions>
    </Menu>
    </View>
</MenuProvider>

Ответ №1:

Просто используйте renderer={renderers.SlideInMenu}

На вершине

  import {MenuProvider,
            Menu,
            MenuOptions,
            MenuOption,
            MenuTrigger,
            renderers} from 'react-native-popup-menu';

затем просто отобразите в компоненте меню

     <MenuProvider>
    <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
    <Text>Hello world!</Text>
    <Menu render={renderers.SlideMenu} >
        <MenuTrigger text='Select action'/>
        <MenuOptions style={{top:0,right:0}}>
            <MenuOption onSelect={() => alert(`Save`)} text='Save' />
            <MenuOption onSelect={() => alert(`Delete`)} >
            <Text style={{color: 'red'}}>Delete</Text>
            </MenuOption>
            <MenuOption onSelect={() => alert(`Not called`)} disabled={true} text='Disabled' />
        </MenuOptions>
    </Menu>
    </View>
</MenuProvider>

затем вы пытаетесь изменить стиль меню, чтобы изменить стиль во всплывающем
окне Дополнительная документация здесь:
renderer:https://github.com/instea/react-native-popup-menu/blob/9808ebfe5a7914fa9bad36c72174c4dd5f52366a/doc/extensions.md

стиль:https://github.com/instea/react-native-всплывающее меню/большой двоичный объект/ЗАГОЛОВОК/документ/api.md

Метки: