first_react_native_project/App.js at master · UraFIZ/first_react_native_project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prefer-stateless-function */
import React from 'react';
import {
  createStackNavigator,
  createBottomTabNavigator,
  createSwitchNavigator,
  createAppContainer,
  createDrawerNavigator,
} from 'react-navigation';
import { View, Text } from 'react-native';
import AuthScreen from './src/screen/Auth/Auth';
import FindPlaceScreen from './src/screen/FindPlace/FindPlace';
import SharePlaceScreen from './src/screen/SharePlace/SharePlace';
import NavigationService from './NavigationService';
import PlaceDetailScreen from './src/screen/PlaceDetail/PlaceDetail';
import SideDrawerScreen from './src/screen/SideDrawer/SideDrawer';

const CentredText = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text style={{ fontSize: 18, color: 'white' }}>Auth</Text>
  </View>
);
const findStack = createStackNavigator({ FindPlaceScreen, PlaceDetailScreen });
const shartStack = createStackNavigator({ SharePlaceScreen });
const authNav = createStackNavigator({ AuthScreen });
authNav.navigationOptions = {
  titleHeader: <CentredText />,
  defaultNavigationOptions: {
    headerStyle: {
      backgroundColor: 'red',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  },
};

const Nav = createBottomTabNavigator(
  {
    find: findStack,
    share: shartStack,
  },
  {
    tabBarOptions: {
      activeTintColor: '#e91e63',
      labelStyle: {
        fontSize: 12,
      },
      style: {
        backgroundColor: 'blue',
      },
    },
  },
);
const MainNavigator = createDrawerNavigator(
  { shartStack, Nav },
  { contentComponent: SideDrawerScreen },
);
const Swetch = createSwitchNavigator(
  {
    authNav,
    MainNavigator,
  },
  {
    initialRouteName: 'authNav',
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: 'red',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  },
);
const AppNavigation = createAppContainer(Swetch);
export default class App extends React.Component {
  state = {
    name: 'Anna',
    age: 33,
  };

  render() {
    return (
      <AppNavigation
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
        screenProps={{
          name: this.state.name,
          age: this.state.age,
        }}
      />
    );
  }
}