使用Tab Navigator的堆栈导航器（React Native）

Question

我试图从screen1 - > screen2使用stacknavigator，当Screen1和Screen2已经在一个标签导航器中，我遇到了一些问题。这是我的App.Js（详细信息已删除）

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;

在我的screen1中，我当前正在导出类screen1，所以当我运行代码时，我得到错误，即使我有这条线也无法找到'navigate'

  const { navigate } = this.props.navigation;

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

Screen1（细节已删除）

export default class screen1 extends React.Component {
  static navigationOptions = {
    title: 'Screen1',
  }
  render () {
     const { navigate } = this.props.navigation;
     return ( 
     
      ---- 
     this.props.navigation.navigate('SecondScreen');


   );
  }
}

export const SimpleApp = StackNavigator({
  screen1: { screen: screen1 },
  screen2: { screen: screen2 },
});
      
      

Answer 1

export default class screen1 extends React.Component {
  static navigationOptions = {
    title: 'Screen1',
  }
  render () {
     const { navigate } = this.props.navigation;
     return ( 
     
      ---- 
    // you need to use the key which is defined in stack navigator.
     this.props.navigation.navigate('screen2');


   );
  }
}

export const SimpleApp = StackNavigator({
  screen1: { screen: screen1 },
  screen2: { screen: screen2 },
});