Nav apraksta

App.js 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. import * as React from 'react';
  2. import { Button, View, Image} from 'react-native';
  3. import { createDrawerNavigator } from '@react-navigation/drawer';
  4. import { NavigationContainer } from '@react-navigation/native';
  5. import About from './screens/about';
  6. import Gallery from './screens/gallery';
  7. import Calendario from './screens/calendar';
  8. import Donate from './screens/donar';
  9. import Solicitar from './screens/solicitar';
  10. import Account from './screens/account';
  11. import Header from './shared/header';
  12. const screens = {
  13. About: {
  14. screen: About,
  15. navigationOptions: ({navigation}) => {
  16. return {
  17. headerTitle: () => <Header navigation={navigation}/>,
  18. }
  19. }
  20. },
  21. }
  22. function HomeScreen({ navigation }) {
  23. return (
  24. <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  25. <Button
  26. onPress={() => navigation.navigate('Notifications')}
  27. title="Go to notifications"
  28. />
  29. </View>
  30. );
  31. }
  32. function NotificationsScreen({ navigation }) {
  33. return (
  34. <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  35. <Button onPress={() => navigation.goBack()} title="Go back home" />
  36. </View>
  37. );
  38. }
  39. const Drawer = createDrawerNavigator();
  40. export default function App() {
  41. return (
  42. <NavigationContainer >
  43. <Drawer.Navigator initialRouteName="Home">
  44. <Drawer.Screen name="Sobre nosotros" component={About} options={({navigation}) => {
  45. return {
  46. headerTitle: () => <Header navigation={navigation}/>,
  47. }
  48. }}/>
  49. <Drawer.Screen name="Calendario" component={Calendario} options={({navigation}) => {
  50. return {
  51. headerTitle: () => <Header navigation={navigation}/>,
  52. }
  53. }}/>
  54. <Drawer.Screen name="Galeria" component={Gallery} options={({navigation}) => {
  55. return {
  56. headerTitle: () => <Header navigation={navigation}/>,
  57. }
  58. }}/>
  59. <Drawer.Screen name="Donar" component={Donate} options={({navigation}) => {
  60. return {
  61. headerTitle: () => <Header navigation={navigation}/>,
  62. }
  63. }}/>
  64. <Drawer.Screen name="Solicitar ayuda" component={Solicitar}
  65. options={({navigation}) => {
  66. return {
  67. headerTitle: () => <Header navigation={navigation}/>,
  68. }
  69. }}/>
  70. <Drawer.Screen name="Mi cuenta" component={Account}
  71. options={({navigation}) => {
  72. return {
  73. headerTitle: () => <Header navigation={navigation}/>,
  74. }
  75. }}/>
  76. </Drawer.Navigator>
  77. </NavigationContainer>
  78. );
  79. }