Javascript 带选项卡导航器的堆栈导航器（React Native）

我试图使用stacknavigator从screen1->screen2中获取，而screen1和screen2已经在选项卡导航器中，我遇到了一些问题。 这是我的App.Js（详细信息已删除）

我让stack navigator/tab navigator自己工作，但是当我把它们放在一起时，它似乎不工作。相反，如果我从screen1类中删除了“export”，我会从App.Js中得到一个错误，说我需要为Tab2（Screen2）提供一个有效的react屏幕

屏幕1（删除详细信息）

导出默认类screen1扩展React.Component{
静态导航选项={
标题：“屏幕1”，
}
渲染（）{
const{navigate}=this.props.navigation；
报税表（
---- 
this.props.navigation.navigate（'SecondScreen'）；
);
}
}
导出常量SimpleApp=StackNavigator({
屏幕1:{screen:screen1}，
屏幕2:{screen:screen2}，
});

导出默认类screen1扩展React.Component{
静态导航选项={
标题：“屏幕1”，
}
渲染（）{
const{navigate}=this.props.navigation；
报税表（
---- 
//您需要使用堆栈导航器中定义的键。
this.props.navigation.navigate（'screen2'）；
);
}
}
导出常量SimpleApp=StackNavigator({
屏幕1:{screen:screen1}，
屏幕2:{screen:screen2}，
});

import Screen1 from "./screen1";
import Screen2 from "./screen2";

export const tabs = TabNavigator({
Tab1: {
   screen:Screen1,
   navigationOptions: { tabBarLabel: 'Test', tabBarIcon: ({ tintColor }) => <Icon name="doc" size={35} color={tintColor} />,
  },
 }, 
Tab2: {
   screen:Screen2,
   navigationOptions: { tabBarLabel: 'Profile', tabBarIcon: ({ tintColor }) => <Icon name="user" size={35} color={tintColor} />,
 },
} });

 export default tabs;

  const { navigate } = this.props.navigation;