Files
react-native-popup-menu/examples/ControlledExample.js
T

55 lines
1.3 KiB
JavaScript
Raw Normal View History

2016-05-26 17:00:15 +02:00
import React, { Component } from 'react';
import { Text } from 'react-native';
import Menu, {
2017-12-19 11:08:34 +01:00
MenuProvider,
2016-05-26 17:00:15 +02:00
MenuOptions,
MenuOption,
MenuTrigger
} from 'react-native-popup-menu';
export default class ControlledExample extends Component {
constructor(props, ctx) {
super(props, ctx);
this.state = { opened: true };
}
onOptionSelect(value) {
alert(`Selected number: ${value}`);
this.setState({ opened: false });
}
onTriggerPress() {
this.setState({ opened: true });
}
onBackdropPress() {
this.setState({ opened: false });
}
render() {
return (
2017-12-19 11:08:34 +01:00
<MenuProvider
2016-05-26 17:00:15 +02:00
style={{flexDirection: 'column', padding: 30}}>
<Text>Hello world!</Text>
<Menu
opened={this.state.opened}
onBackdropPress={() => this.onBackdropPress()}
onSelect={value => this.onOptionSelect(value)}>
<MenuTrigger
onPress={() => this.onTriggerPress()}
text='Select option'/>
<MenuOptions>
<MenuOption value={1} text='One' />
2016-06-07 17:05:25 +02:00
<MenuOption value={2}>
<Text style={{color: 'red'}}>Two</Text>
2016-05-30 09:17:00 +02:00
</MenuOption>
2016-06-07 17:05:25 +02:00
<MenuOption value={3} disabled={true} text='Three' />
2016-05-26 17:00:15 +02:00
</MenuOptions>
</Menu>
2017-12-19 11:08:34 +01:00
</MenuProvider>
2016-05-26 17:00:15 +02:00
);
}
}