TabBarOnPress does not work in interactive navigation tabs in responsive mode

Question

I use the nested navigator> tab> stack navigators.

navigators work, but when I click on a tab element, you throw the following error

undefined is not an object (score "_ref4.route") _getOnPress TabView.js: 110: 44 _handleOnPress TabBarTop.js: 127: 31 onPress TabBar.js: 466: 33 _callTimer JSTimers.js: 156: 15 callTimers JSTimers.js: 411 : 17 __callFunction MessageQueue.js: 302: 47 MessageQueue.js: 116: 26 __guard MessageQueue.js: 265: 6 callFunctionReturnFlushedQueue MessageQueue.js: 115: 17

I'm stuck here, I tried a lot of things, but didn’t have time

here is my code

DrawerNav.js

import React, { Component } from 'react';
import { DrawerNavigator} from 'react-navigation';
import Icon from "react-native-vector-icons/FontAwesome";
import stackNav from './stackNav';


const Drawer = DrawerNavigator({
    DrawerItem1: {
        screen: stackNav,
        navigationOptions: {
            drawerLabel: "Drawer Item 1",
            drawerIcon: ({ tintColor }) => <Icon name="rocket" size={24} />
        },
    },
    DrawerItem2: {
        screen: stackNav,
        navigationOptions: {
            drawerLabel: "Drawer Item 2",
            drawerIcon: ({ tintColor }) => <Icon name="rocket" size={24} />
        },
    }
});


export default Drawer;

TabNav.js

import React, { Component } from 'react';
import { TabNavigator, TabView } from 'react-navigation'
import Icon from "react-native-vector-icons/FontAwesome";
import MainScreen from './screens/MainScreen';

const tabNav = TabNavigator({
    TabItem1: {
        screen: MainScreen,
        navigationOptions: {
            tabBarLabel:"Tab One",
            tabBarIcon: ({ tintColor }) => <Icon name={"glass"} size={30} color={tintColor} />
        }
    },

    TabItem2: {
        screen: MainScreen,
        navigationOptions: {
            tabBarLabel:"Tab Two",
            tabBarIcon: ({ tintColor }) => <Icon name={"glass"} size={30} color={tintColor} />
        }
    },

    TabItem3: {
        screen: MainScreen,
        navigationOptions: {
            tabBarLabel:"Tab Three",
            tabBarIcon: ({ tintColor }) => <Icon name={"glass"} size={30} color={tintColor} />
        }
    }

    ///... add more tabs here

}, {
        tabBarPosition: 'bottom',
        tabBarOptions: {
            activeTintColor: '#222'
        },
});


export default tabNav;

stackNav.js

import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import { StackNavigator} from 'react-navigation'
import IOSIcon from "react-native-vector-icons/Ionicons";
import DetailScreen from './screens/DetailScreen';
import MainScreen from './screens/MainScreen';
import tabNav from './tabNav'

const stackNav = StackNavigator({
    Main: {
        screen: tabNav,
        navigationOptions:({navigation}) => ({
            title: "Main",
            headerLeft:(
              <TouchableOpacity onPress={() => navigation.navigate("DrawerOpen")}>
                <IOSIcon name="ios-menu" size={30} />
              </TouchableOpacity>
            ),
            headerStyle: { paddingRight: 10, paddingLeft: 10 },
        })
    },
    Detail: {
        screen: DetailScreen,
        navigationOptions: (props) => ({
            title: "Detail",
        })
    }
})

export default stackNav;

Answer 1

TabNavigator.

- (https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/SimpleTabs.js) ( ).

, Expo/React Native.

?

:

"dependencies": {
    "expo": "^22.0.2",
    "react": "16.0.0-beta.5",
    "react-native": "^0.49.5",
    "react-navigation": "^1.0.0-beta.20"
  }

: Create React Native App . , , , Create React Native App Expo.