3: Сделать навигаторы

package.json

@@ -13,7 +13,9 @@
     "prop-types": "^15.6.1",
     "react": "16.3.1",
     "react-native": "0.55.3",
-    "react-navigation-redux-helpers": "1.0.3",
+    "react-navigation": "^2.0.0-rc.9",
+    "react-navigation-header-buttons": "^0.0.7",
+    "react-navigation-redux-helpers": "^1.0.3",
     "react-redux": "^5.0.7",
     "redux": "^4.0.0",
     "redux-devtools-extension": "^2.13.2",

src/actions/navigation.js

@@ -0,0 +1,12 @@
+import {NavigationActions} from 'react-navigation';
+
+export const navigate = ({
+    route,
+    // key,
+    // action,
+    // params = {},
+}) => dispatch => {
+    dispatch(NavigationActions.navigate({
+        routeName: route.key,
+    }));
+};

src/constants/propTypes.js

@@ -0,0 +1,7 @@
+import PropTypes from 'prop-types';
+
+export const screen = PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+});
+

src/constants/screens.js

@@ -0,0 +1,25 @@
+export const HOME = {
+    key: 'Home',
+    title: 'Главная',
+};
+
+export const LOGIN = {
+    key: 'Login',
+    title: 'Вход/Регистрация',
+};
+
+export const TRACKING = {
+    key: 'Tracking',
+    title: 'Отслеживания',
+};
+
+export const PROFILE = {
+    key: 'Profile',
+    title: 'Профиль',
+};
+
+export const NEXTPAGE = {
+    key: 'Next',
+    title: 'Следующая страница',
+};
+

src/containers/AppNavigator/index.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {createStackNavigator, createBottomTabNavigator} from 'react-navigation';
+import {YellowBox} from 'react-native';
+
+import screensMap from '../../lib/screens';
+import {addListener} from '../../lib/redux';
+import {
+    HOME,
+    TRACKING,
+    LOGIN,
+    PROFILE,
+} from '../../constants/screens';
+
+// TabBar screens
+const tabBarScreens = [HOME, TRACKING, LOGIN, PROFILE];
+
+YellowBox.ignoreWarnings(['Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
+
+const getRouteConfigForTabBarStacks = (tabScreen) => {
+    const routeConfigs = {};
+    screensMap.forEach((screen, {key}) => routeConfigs[key] = {screen});
+    tabBarScreens.forEach((screen) => {
+        if (tabScreen !== screen) { delete routeConfigs[screen.key]; }
+    });
+    return routeConfigs;
+};
+
+// Route config for create TabNavigator
+const routeConfigForTabBar = {};
+tabBarScreens.forEach((screen) => {
+    routeConfigForTabBar[screen.key] = createStackNavigator(
+        getRouteConfigForTabBarStacks(screen),
+        {initialRouteName: screen.key}
+    );
+});
+
+export const AppNavigator = createBottomTabNavigator(routeConfigForTabBar);
+
+class AppWithNavigationState extends React.Component {
+  static propTypes = {
+      dispatch: PropTypes.func.isRequired,
+      nav: PropTypes.object.isRequired, // eslint-disable-line
+  };
+
+  render() {
+      const {dispatch, nav} = this.props;
+      return (
+          <AppNavigator
+              navigation={{
+                  dispatch,
+                  state: nav,
+                  addListener,
+              }}
+          />
+      );
+  }
+}
+
+const mapStateToProps = state => ({
+    nav: state.nav,
+});
+
+export default connect(mapStateToProps)(AppWithNavigationState);

src/containers/HomeScreen/index.js

@@ -1,13 +1,9 @@
-// @flow
-
 import React, {PureComponent} from 'react';
-import {connect} from 'react-redux';
 import {View} from 'react-native';
 
-import Home from '../../components/home';
+import Home from '../../components/Home';
 import styles from './styles';
 
-
 const titles = ['jambul', 'ermagambet'];
 
 class HomeScreen extends PureComponent {
@@ -22,5 +18,8 @@ class HomeScreen extends PureComponent {
     }
 }
 
-export default connect()(HomeScreen);
+HomeScreen.navigationOptions = {
+    title: 'Home Screen',
+};
 
+export default HomeScreen;

src/containers/LoginScreen/index.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {Button, Text, View} from 'react-native';
+
+import {navigate} from '../../actions/navigation';
+import {TRACKING} from '../../constants/screens';
+import styles from './styles';
+
+const LoginScreen = ({dispatch}) => (
+    <View style={styles.container}>
+        <Text style={styles.welcome}>
+      Screen A
+        </Text>
+        <Text style={styles.instructions}>
+      This is great
+        </Text>
+        <Button
+            onPress={() => dispatch(navigate({route: TRACKING}))}
+            title="TRACKING"
+        />
+    </View>
+);
+
+LoginScreen.propTypes = {
+    dispatch: PropTypes.func.isRequired,
+};
+
+LoginScreen.navigationOptions = {
+    title: 'Loging Screen',
+};
+
+export default connect()(LoginScreen);

src/containers/LoginScreen/styles.js

@@ -0,0 +1,15 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    welcome: {
+        fontSize: 20,
+        textAlign: 'center',
+        margin: 10,
+    },
+});

src/containers/NextPageScreen/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {Button, View} from 'react-native';
+
+import {navigate} from '../../actions/navigation';
+import {LOGIN} from '../../constants/screens';
+import styles from './styles';
+
+const NextPageScreen = ({dispatch}) => (
+    <View style={styles.container}>
+        <Button
+            onPress={() => dispatch(navigate({route: LOGIN}))}
+            title="LOGIN"
+        />
+    </View>
+);
+
+NextPageScreen.propTypes = {
+    dispatch: PropTypes.func.isRequired,
+};
+
+NextPageScreen.navigationOptions = {
+    title: 'NEXT PAGE',
+};
+
+export default connect()(NextPageScreen);

src/containers/NextPageScreen/styles.js

@@ -0,0 +1,15 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    welcome: {
+        fontSize: 20,
+        textAlign: 'center',
+        margin: 10,
+    },
+});

src/containers/ProfileScreen/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import {Text, View} from 'react-native';
+
+import styles from './styles';
+
+const ProfileScreen = () => (
+    <View style={styles.container}>
+        <Text style={styles.welcome}>
+            Profile Screen
+        </Text>
+    </View>
+);
+
+ProfileScreen.navigationOptions = {
+    title: 'Profile Screen',
+};
+
+export default connect()(ProfileScreen);

src/containers/ProfileScreen/styles.js

@@ -0,0 +1,15 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+    welcome: {
+        fontSize: 20,
+        textAlign: 'center',
+        margin: 10,
+    },
+});

src/containers/TrackingScreen/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {connect} from 'react-redux';
+import {View, Button} from 'react-native';
+import {navigate} from '../../actions/navigation';
+import {NEXTPAGE} from '../../constants/screens';
+
+import styles from './styles';
+
+const TrackingScreen = ({dispatch}) => (
+    <View style={styles.container}>
+        <Button
+            onPress={() => dispatch(navigate({route: NEXTPAGE}))}
+            title="NEXT PAGE"
+        />
+    </View>
+);
+
+TrackingScreen.propTypes = {
+    dispatch: PropTypes.func.isRequired,
+};
+
+TrackingScreen.navigationOptions = {
+    title: 'Tracking Screen',
+};
+
+export default connect()(TrackingScreen);

src/containers/TrackingScreen/styles.js

@@ -0,0 +1,10 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#F5FCFF',
+    },
+});

src/containers/index.js

@@ -1,17 +1,16 @@
-// @flow
 import React, {PureComponent} from 'react';
 import {Provider} from 'react-redux';
 
 import {createStore} from '../lib/store';
-import HomeScreen from './HomeScreen';
+import AppWithNavigationState from './AppNavigator';
 
 const store = createStore();
 
 class App extends PureComponent {
     render() {
         return (
             <Provider store={store}>
-                <HomeScreen/>
+                <AppWithNavigationState/>
             </Provider>
         );
     }

src/lib/redux.js

@@ -0,0 +1,15 @@
+import {
+    createReactNavigationReduxMiddleware,
+    createReduxBoundAddListener,
+} from 'react-navigation-redux-helpers';
+
+const middleware = createReactNavigationReduxMiddleware(
+    'root',
+    state => state.nav,
+);
+const addListener = createReduxBoundAddListener('root');
+
+export {
+    middleware,
+    addListener,
+};

src/lib/screens.js

@@ -0,0 +1,21 @@
+import HomeScreen from '../containers/HomeScreen';
+import LoginScreen from '../containers/LoginScreen';
+import TrackingScreen from '../containers/TrackingScreen';
+import ProfileScreen from '../containers/ProfileScreen';
+
+import {
+    HOME,
+    LOGIN,
+    TRACKING,
+    PROFILE,
+    NEXTPAGE,
+} from '../constants/screens';
+import NextPageScreen from '../containers/NextPageScreen';
+
+export default new Map([
+    [HOME, HomeScreen],
+    [TRACKING, TrackingScreen],
+    [LOGIN, LoginScreen],
+    [PROFILE, ProfileScreen],
+    [NEXTPAGE, NextPageScreen],
+]);

src/lib/store.js

@@ -3,7 +3,11 @@ import thunk from 'redux-thunk';
 import promise from 'redux-promise-middleware';
 import {composeWithDevTools} from 'redux-devtools-extension';
 
+import AppReducer from '../reducers';
+import {middleware as navigationMiddleware} from './redux';
+
 const middlewares = [
+    navigationMiddleware,
     promise(),
     thunk,
 ];
@@ -14,7 +18,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 
 const createAppStore = () => createStore(
-    () => ({}),
+    AppReducer,
     composeWithDevTools(applyMiddleware(...middlewares))
 );