react native undefined不是对象('this.props.navigation.navigate')错误

我想按以下步骤进行

堆栈导航器->选项卡导航器->堆栈导航器

出现组件移动错误。

导航器.js

const SignUpScene = createStackNavigator({
 SignUp: {screen: SignUp},
 }, ...

 const SigninScene = createStackNavigator({
  HomeUI: {screen: HomeUI},
  TopTab: {screen: TopTab},
  Screen1: {screen: Screen1},
  SignUpScene: {screen: SignUpScene},
 }, ...

 const HomeScene = createStackNavigator({
  SigninScene: {screen: SigninScene},
 }, ...

 export default class Navigator extends Component {
  render() {
   return(
    <HomeScene />
   );
  }
 }

主页.js

render() {
 const {navigate} = this.props.navigation;
 return (
  <View>
   <Image... />
   <View>
    <TouchableOpacity
     ...
     opPress={() => navigate("TopTab")}>
     <Text> button1 </Text>
    </TouchableOpacity>
    <TouchableOpacity
     ...
     onPress={() => navigate("Screen1")}>
     <Text> button2 </Text>
    </TouchableOpacity>
   </View>
  </View>
 )}

TopTab.js网站

export default TopTab = createMaterialTopTabNavigator({
 Tab1: {
  screen: Tab1,
  navigationOptions: {...}
 },
 Tab2: {
  screen: Tab2,
  navigationOptions: {...}
 }
})

表1.js

render() {
 const {navigate} = this.props.navigation;
 return(
  ...
  <view>
   <Button
    onPress={() => navigate("SignUpScene")} />
    ...
  </View> 
  ...
 )}

未定义不是对象('this.props.navigation.navigate')

我可以在stacknavigator中看到堆栈吗?