Как использовать React-navigation если сцена это класс?

Question

Дмитрий @MrKarton

Погромист

Как использовать React-navigation если сцена это класс?

В доках на официальном сайте библиотеки сцены представлены в виде функций, куда мы передаём класс navigation в качестве аргемента. В моём же проекте сцена - это класс.
Как мне сделать навигацию из сцены login на сцену StreamScreen?

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;