使用Stacknavigator和Tabnavigator响应本机错误

Question

我要继续进行以下操作

StackNavigator-> TabNavigator-> StackNavigator

单击屏幕上的按钮将移至选项卡式屏幕，而单击屏幕上的按钮将移至其他表格的屏幕。

Navigator.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 />
  );
 }
}

HomeUI.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: {...}
 }
})

Tab1.js

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

发生以下错误：

  

未定义不是对象（'this.props.navigation.navigate'）

我该如何解决？

我可以看到堆叠在stacknavigator中的堆叠吗？

我要调试