hello-reactnative/App.js at master · EvgeneOskin/hello-reactnative · 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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, Text, View, Button, ViewPropTypes } from 'react-native';
import { Router, Scene } from 'react-native-router-flux'
import { Actions } from 'react-native-router-flux'; // New code

import { TabNavigator, StackNavigator, DrawerNavigator } from 'react-navigation';

import Ionicons from 'react-native-vector-icons/Ionicons';

const HomeScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button
      onPress={() => Actions.profile()}
      title="Press me!"
    />
    <Button
      onPress={() => Actions.drawerOpen()}
      title="Show drawer!"
    />
  </View>
);

const ProfileScreen = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Profile Screen</Text>
  </View>
);

const RootTabs = DrawerNavigator({
  Home: {
    screen: HomeScreen,
    navigationBarOptions: {
      headerTitle: 'Home',
      tabBarLabel: 'Home',
      drawerLabel: 'Home',
      tabBarIcon: ({ tintColor, focused }) => (
        <Ionicons
          name={focused ? 'ios-home': 'ios-home-outline'}
          size={26}
          style={{ color: tintColor }}
        />
      )
    }
  },
  Profile: {
    screen: ProfileScreen,
    navigationBarOptions: {
      headerTitle: 'Profile',
      tabBarLabel: 'Profile',
      drawerLabel: 'Profile',
    }
  },
});

class DrawerContent extends React.Component {
  static propTypes = {
    name: PropTypes.string,
    sceneStyle: ViewPropTypes.style,
    title: PropTypes.string,
  }

  static contextTypes = {
    drawer: PropTypes.object,
  }

  render() {
    return (
      <View style={styles.drawerContainer}>
        <Text>Drawer Content</Text>
        <Button onPress={Actions.closeDrawer} title="Back" />
        <Text>Title: {this.props.title}</Text>
        <Button onPress={Actions.pop} title="Back" />
        <Button onPress={Actions.home} title="Switch to home" />
        <Button onPress={Actions.end} title="Switch to home end" />
      </View >
    );
  }
}


export class App extends React.Component {
  render() {
    return (
      <Router>
        <Scene key="root">
          <Scene key="tabbar"
            drawer={true}
            contentComponent={DrawerContent}
          >
            <Scene key="begin"
              title="Home"
            >
              <Scene key="home"
                component={HomeScreen}
                title="Home"
                initial
              />
              <Scene key="profile"
                component={ProfileScreen}
                title="Profile"
                hideNavBar
              />
            </Scene>
            <Scene key="end"
              component={HomeScreen}
              title="Home END"
            >
              <Scene key="homeEnd"
                component={HomeScreen}
                title="Home"
              />
            </Scene>
          </Scene>
        </Scene>
      </Router>
    );
  }
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  drawerContainer: {
  },
});