Files
react-native-popup-menu/examples/NavigatorExample.js
T
raymondtam 652a29642d To resolve the issues of having "Key xxx is already defined"
By defining all the scenes during compile time.
Im using similar structure in my own projects. Hope this will help someone getting rid of the warning message.
(Reference: https://github.com/aksonov/react-native-router-flux/blob/master/docs/REDUX_FLUX.md)

PS. I have to put scenes declaration after Page and NavigatorMenu to make this work. Im not sure if this is expected or not. Any suggestion is welcome. Thanks.
2017-03-19 10:32:48 +08:00

56 lines
1.5 KiB
JavaScript

import React from 'react';
import { Text, View, } from 'react-native';
import Menu, {
MenuContext,
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>
);
const scenes = Actions.create(
<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>
);
class NavigatorExample extends React.Component {
render() {
return (
<MenuContext>
<Router scenes={scenes} />
</MenuContext>
);
}
}
export default NavigatorExample;