Reactjs 使用类组件响应本机堆栈导航

我目前正在构建一个react本机应用程序，并使用堆栈导航器在我的应用程序中的屏幕之间导航。在my App.js中，我当前以以下格式存储屏幕：

const Stack = createStackNavigator();

export default function App() {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="screen1">
          <Stack.Screen name="screen1" component={Screen1}></Stack.Screen>
          <Stack.Screen name="screen2" component={Screen2}></Stack.Screen>
        </Stack.Navigator>
      </NavigationContainer>
  );
}

const Stack=createStackNavigator（）；
导出默认函数App（）{
返回(
);
}

在用户进入屏幕1后，我希望能够通过按下按钮导航到屏幕2。我通读了文档，只看到了如何使用功能组件执行此操作的示例，例如：

function Screen1({ navigation }) {
  return (
    <View>
      <Button title="Go to Home" onPress={() => navigation.navigate('screen2')} />
    </View>
  );
}

函数屏幕1（{navigation}）{
返回(
navigation.navigate（'screen2'）}/>
);
}

但如何使用类组件实现这一点：

class Screen1 extends Component {

    render() {
        return(
            <View>
               // This does not work because I do not know how to pass in the navigation object
               <Button title="Go to Home" onPress={() => navigation.navigate('screen2')} />
            </View>
        )
    }
}

class Screen1扩展了组件{
render（）{
返回(
//这不起作用，因为我不知道如何传入导航对象
navigation.navigate（'screen2'）}/>
)
}
}

---

我在哪里通过

{navigation}

？

你不必通过导航，它是作为道具通过的

您可以像下面这样访问它

this.props.navigation.navigate('nextScreen')

---

1:

从'react router dom'导入{Link，withRouter}

2:
使用路由器导出默认值（组件）

如果出现错误，应该是这样的：
this.props.navigation.navigate（'nextScreen'）
Login = () => {
  this.props.history.push("/login")
}