react-native-popup-menu/examples/NavigatorExample.js

54 lines
1.5 KiB
JavaScript

import React from 'react';
import { Text, View } from 'react-native';
import Menu, {
MenuProvider,
MenuOptions,
MenuOption,
MenuTrigger,
} from 'react-native-popup-menu';
import {Scene, Router, Actions} from 'react-native-router-flux';
const Page = () => (
<View style={{flexDirection: 'column', padding: 70}}>
<Text>Hello world with react-native-router-flux!</Text>
<Menu>
<MenuTrigger text='Select option' />
<MenuOptions>
<MenuOption onSelect={() => Actions.login()} text='Login' />
<MenuOption onSelect={() => Actions.register()} text='Register' />
<MenuOption onSelect={() => Actions.home()} text='Home' />
</MenuOptions>
</Menu>
</View>
);
const NavigatorMenu = () => (
<Menu>
<MenuTrigger text='...' />
<MenuOptions>
<MenuOption onSelect={() => Actions.login()} text='Navigation Login' />
<MenuOption onSelect={() => Actions.register()} text='Navigation Register' />
<MenuOption onSelect={() => Actions.home()} text='Navigation Home' />
</MenuOptions>
</Menu>
);
class NavigatorExample extends React.Component {
render() {
return (
<MenuProvider>
<Router>
<Scene key="root" >
<Scene key="login" component={Page} title="Login" renderRightButton={NavigatorMenu}/>
<Scene key="register" component={Page} title="Register"/>
<Scene key="home" component={Page}/>
</Scene>
</Router>
</MenuProvider>
);
}
}
export default NavigatorExample;