未定义不是评估_this2.props.navigation的对象

Question

我尝试将选项卡栏分组在component文件夹中，并在homeScreen中进行渲染，但出现此错误

 这是我的tabBar.js

      import React, { Component } from 'react';

  import { 
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Animated,
  Image,
  Dimensions,
  ImageBackground,
  Button,
  TouchableHighlight,
  PixelRatio,

  } from 'react-native';





export default class App extends Component {
constructor(props) {
super(props);
this.state = {
};
}

render() {
 return (
  <View style={styles.tabBarView}>
    <TouchableHighlight
      style={styles.tabBarButton}
      onPress = {()=> this.props.navigation.navigate('Search')}>
        <Text style={styles.tabBarButtonText}>寫下評論 。。。</Text>
    </TouchableHighlight>
    <TouchableOpacity>
        <Image
          source={require('../assets/Home.png')}
          style={styles.tabIconStyle}
          />
    </TouchableOpacity>
    <TouchableOpacity>
        <Image
          source={require('../assets/Dialog.png')}
          style={styles.tabIconStyle}
          />
    </TouchableOpacity>
    <TouchableOpacity>
        <Image
          source={require('../assets/Centre.png')}
          style={styles.tabIconStyle}
          />
    </TouchableOpacity>
   </View>
   );
   }
   }

这是我的TabNavigation

    import {createSwitchNavigator} from 'react-navigation'

    import searchScn from '../screens/tabScreen/searchScreen'
    import homeScn from '../screens/mainScreens/homeScreen'

     export default TabNav = createSwitchNavigator({
    Home:{
    screen: homeScn,
    navigationOptions: ()=>({

    })
    },


    Search:{
    screen: searchScn,
    navigationOptions: ()=>({

    })
    },

    });

AppNavigator.js

  export default Container =createAppContainer(createSwitchNavigator({

 Main: MainNav,
 Head:HeadNav,
 Specialist:SpecialistNav,
 Tab:TabNav,






  }));

我的主屏幕可以成功显示，但是 当我做的时候 在touchableopacity内onPress = {（）=> this.props.navigation.navigate（'Search'）时，出现错误。

我试图将代码更改为navigation.navigate（'Search'）

错误变成找不到变量“导航”

我该如何解决这个问题？