javascript - This navigator has both navigation and container props in React Native

Question

I'm trying to make a bottom Navbar in React Native and I came up with this error : "This navigator has both navigation and container props, so it is unclear if it should own its own state. Remove props: "route" if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass a navigation prop."

I try to change the line at bottom : export default createAppContainer(TabNavigator); to export default (TabNavigator);

But when I do that I have another error saying "Cannot read property 'routes' of undefined. Did someone came across this error and can help?

import React, {Component} from 'react'
import {Text, View, StyleSheet } from 'react-native';
import {createBottomTabNavigator, createAppContainer } from 'react-navigation';
import {createMaterialBottomTabNavigator} from 'react-navigation-material-bottom-tabs';
import {Icon} from 'react-native-elements';

import Profile from "./Profile";
import Appointment from "./Appointment";



const styles = StyleSheet.create({

   homeText: {
      fontSize: 40,
      
   },

   homeCont: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center"
   }

})

class Home extends Component {

   render() {

      return(

         <View style={styles.homeCont}>
            <Text style={styles.homeText}>HOME SCREEN</Text>
            
         </View>
    
     
      )

   }

   

}

const TabNavigator= createMaterialBottomTabNavigator({

   Home: {screen:Home,
          navigationOptions: {
             tabBarLabel: 'Home',
             activeColor: '#ff0000',
             inactiveColor: '#000000',
             barStyle: {backgroundColor: '#67baf6'},
             tabBarIcon:() => (
                <View>
                   <Icon name={'home'} size={25} style={{color:'#ff000'}} />
                </View>
             )
          }
   },
   Appointment: {screen:Appointment,
      navigationOptions: {
         tabBarLabel: 'Appointment',
         activeColor: '#ff0000',
         inactiveColor: '#000000',
         barStyle: {backgroundColor: '#67baf6'},
         tabBarIcon:() => (
            <View>
               <Icon name={'calendar'} size={25} style={{color:'#ff000'}} />
            </View>
         )
      }
},

Profile: {screen:Profile,
   navigationOptions: {
      tabBarLabel: 'Profile',
      activeColor: '#ff0000',
      inactiveColor: '#000000',
      barStyle: {backgroundColor: '#67baf6'},
      tabBarIcon:() => (
         <View>
            <Icon name={'person'} size={25} style={{color:'#ff000'}} />
         </View>
      )
   }
}


});

export default (TabNavigator);

Answer 1

等待大神解答