How to use React-navigation if the scene is a class?

Question

JavaScript

In the docks on the official website of the library, scenes are presented as functions, where we pass the navigation class as an argument. In my own project, the scene is a class.
How do I navigate from the login scene to the StreamScreen scene?

app.js:

import 'react-native-gesture-handler';
import { YellowBox } from 'react-native';
import {createStackNavigator} from "@react-navigation/stack";
import {NavigationContainer} from "@react-navigation/native"
import React from 'react';

YellowBox.ignoreWarnings([
  'Unrecognized WebSocket connection option(s) `agent`, `perMessageDeflate`, `pfx`, `key`, `passphrase`, `cert`, `ca`, `ciphers`, `rejectUnauthorized`. Did you mean to put these under `headers`?'
])

import StreamScreen from "./src/Scenes/Stream";
import Login from "./src/Scenes/Login";

const Stack = createStackNavigator();

function App ()
{
  return(
    <NavigationContainer>
      <Stack.Navigator screenOptions={
        {header:() => null}
      }>
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Stream" component={StreamScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

export default App;

Login.js:

import { StyleSheet, Text, View, TextInput, Button, Dimensions } from 'react-native';
import React, { Component } from 'react';
import { createStackNavigator } from "@react-navigation/stack";
import {NavigationState} from "@react-navigation/native"

var sh = Dimensions.get("window").height / 100;
var sv = Dimensions.get("window").width / 100; 

var Stack = createStackNavigator();

class Login extends Component{
    constructor(props)
    {
        super(props);

        this.state = {
            Login : '',
            Password : ''
        }
    }

    handleLogin = (text) => {
        this.setState({Login:text});
    }

    handlePass = (text) => {
        this.setState({Password:txt});
    }

    render(){
        return (
            <View style={styles.TopView}>
                <Text style={styles.TitleText}> Вход </Text>
                
                <View style={styles.InputContainer}>
                    <Text style={styles.InputTitle}>Логин</Text>
                    <View style={styles.InputBox}><TextInput onChangeText={this.handleLogin} /></View>
                </View>

                <View style={styles.InputContainer}>
                    <Text style={styles.InputTitle}>Пароль</Text>
                    <View style={styles.InputBox}><TextInput onChangeText={this.handlePass} /></View>
                </View>

                <View style={styles.LogButton} onPress={()=> {}}>
                    <Text style={styles.LogButtonText}>Войти</Text>
                    
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    TopView: {
        backgroundColor: "#2C343A",
        height: "100%",
        alignItems: 'center',
    },

    TitleText:{
        color: "#ffff",
        fontSize: 40,
        marginTop: sh * 15
    },

    InputContainer:{
        color: "#ffff",
        marginTop: sh * 5
    },  

    InputTitle:{
        color: "#ffff",
        fontSize: 15
    },

    InputBox:{
        backgroundColor: "#ffff",
        height: sh*5,
        width: sv * 50,
    },

    LogButton:{
        width: sv * 50,
        backgroundColor: "#3CBDFA",
        marginTop: sh * 10,
        alignItems: "center"
    },

    LogButtonText:{
        color: "#ffff",
        fontSize: 20
    }

});


export default Login;

Answer 1

https://reactnavigation.org/docs/use-navigation/#u...